Istanbul coverage interference

[luckylooke]

First of all, thank you for your contribution.

I am using jest snapshot for snapshoting template state of Vue component - SFC (single file component) and instanbul comments get into template and so it breaks snapshots. I think it is Vue loader or something which replaces controller functions references in templates with their implementation. Maybe serializer would removesuch javascript code from templates? 🙏 🤷

template source look like this:

    <h6>{{ $t('user.profile.title') }}</h6>
    <ws-input
      v-model="newUser.personalInformation.login"
      name="username"
      :label="$t('user.login.label')"
      autocomplete="username"
      path="user.personalInformation.login"
      debounce="300"
      required
      :lazy-rules="false"
      restrict="0-9A-Za-z\-\."
      :rules="[required, minLength(2), maxLength(125), uniqueLogin]"
    />

Thank you for any help 🙏

[luckylooke]

I found out additional info... when I put some object into binded attribut

<div :some="{ prop: true }">

result in template is

<div :some="[object Object]">

which is good also for snapshots as it does not change.
But when I put function there

<div :some="() => { return true; }">

results in (when using coverage)

<div :some="function () {
             /* istanbul ignore next */
             cov_coc3bbk03.f[36]++;
             cov_coc3bbk03.s[147]++;
             return true;
        }">

same result for referenced functions

<div :some="someFunction">

and that is isolated behaviour which breaks those snapshot tests

[TheJaredWilcurt]

By default, this issue is resolved in v3.16.0+ of my fork of Jest-Serializer-Vue (among many other features).

You should read the comments in this issue: tjw-lint#71

My fork, and instructions on how to replace Jest-Serializer-Vue with it are here:

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

[TheJaredWilcurt]

You can also optionally enable a setting to replace all inline functions with a placeholder, as of v3.17.0 of Jest-Serializer-Vue-TJW.

Your screenshot snapshot would look more like this:

<h6>user.profile.title</h6>
<wp-input-stub value="" restrict="0-9A-Za-z\-\." path="user.personalInformation.login" required="true" name="username" label="user.login.label" autocomplete="username" debounce="300" rules="[function]">

I don't use inline functions, so if you try out either feature (removeIstanbulComments or clearInlineFunctions) and find any bugs, create an issue for me:

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