Missing function form for clearInlineFunctions regex

[cameron-martin]

This is a prop that comes from a default value of a prop:

foo: {
  type: Function,
  default() {
    return () => ({});
  },
},

It gets printed like so:

default() {
        return () => ({});
      }

And the regex used to remove functions when clearInlineFunctions is set does not pick this up.

[TheJaredWilcurt]

I am unable to reproduce this issue:

• https://github.com/tjw-lint/jest-serializer-vue-tjw/pull/77/files

[cameron-martin]

That's because you're not writing it in the same way in the test. You are writing

      default: function () {
        return () => ({});
      }

Whereas you should be writing:

      default () {
        return () => ({});
      }

[TheJaredWilcurt]

Did it both ways, the result is the same. using shorthand does not change the output of the snapshot

• c3347f8#diff-45b1d45ef25c986f1156ff06868bb7e7740932ad79762c29f5a4fb25c1ad6d81R39

[cameron-martin]

It must be some difference in how the Vue files are compiled in your tests vs my tests

[TheJaredWilcurt]

That could be the case. This repo should be roughly equivalent to the average Vue-CLI repo. It should be using babel and vue-template-compiler. But it is missing webpack, since this repo does not run a server locally or do a web app build.

• https://github.com/tjw-lint/jest-serializer-vue-tjw/blob/master/package.json

If you can find out what the difference is, we may be able to add that into the repo to better simulate the dev environment.

It may also help to explain the discrepancy in rendering slots, seen in #48.

[dschreij]

I am also suddenly having trouble with the clearInlineFunctions functionality after a recent update, which I didn't have before. It works fine in the majority of modules, but for a few where the function contents are a computed property (and contingent on a prop), the whole function is spelled out, causing snapshots to fail. For instance:

const numberValidation = computed(() => props.validateForm
      ? [
        (v: string) => !isEmpty(`${v}`) || i18n.t('validation.required'),
        (v: string) => parseFloat(v) > 0 || i18n.t('validation.notZero')
      ]
      : []
    )

passed in the template as

<v-textfield
    ...
    :rules="numberValidation"
/>

becomes

<div class="v-input v-input--hide-details v-input--is-label-active v-input--is-dirty theme--light v-text-field v-text-field--enclosed v-text-field--outlined" hide-details="auto" label="quotes.modal.line_info.price" outlined rules="(v) => {
          return (
            (cov_pmploy7k8().b[3][0]++, !(0, _isEmpty.default)(`${v}`)) ||
            (cov_pmploy7k8().b[3][1]++, i18n.t('validation.required'))
          );
        },(v) => {
          return (
            (cov_pmploy7k8().b[4][0]++, parseFloat(v) > 0) ||
            (cov_pmploy7k8().b[4][1]++, i18n.t('validation.notZero'))
          );
        }">

I realize these technically aren't functions but arrays of functions, but it used to work without problems. Is there anything in the recent updates that changed the rules in this regard?

For now I have solved this by adding "rules" to attributesToClear but I thought I would report it anyway.

[TheJaredWilcurt]

@dschreij What do you mean by "recent update". The last release of this library was 281 days ago. Can you specify what version you were using before and what version you are on now?

All changes (and code diffs) are thoroughly documented on the releases page:

• https://github.com/tjw-lint/jest-serializer-vue-tjw/releases

Your code examples are good. Pointing to computed and props specifically may lead to being able to reproduce this.

[dschreij]

Apologies. I didn't actually check if there was an update, I recently did an npm install instead of the regular npm ci and after that the problem started to occur, so I simply assumed a new version of this package was released. I solved the problem by excluding the rules attribute for now, but I am glad my code examples are a useful repro.