feat(stubs): render function props deterministically, fix #975

[MitchLillie]

Since @briwa 's PR languished and we haven't heard from them, I'm re-opening the same. Tests are working fine for me.

Closes #975 and #1209.

What kind of change does this PR introduce? (check at least one)

• Bugfix
• Feature
• Code style update
• Refactor
• Build-related changes
• Other, please describe:

Does this PR introduce a breaking change? (check one)

• Yes
• No

If yes, please describe the impact and migration path for existing applications:

Applications with shallow mounted snapshot testing of components that pass functions to child components should update their snapshots.

The PR fulfills these requirements:

• It's submitted to the dev branch.
• When resolving a specific issue, it's referenced in the PR's title (e.g. fix #xxx[,#xxx], where "xxx" is the issue number)
• All tests are passing: https://github.com/vuejs/vue-test-utils/blob/dev/.github/CONTRIBUTING.md#development-setup
• New/updated tests are included

If adding a new feature, the PR's description includes:

• A convincing reason for adding this feature (to avoid wasting your time, it's best to open a suggestion issue first and wait for approval before working on it)

Other information:

[lmiller1990]

Code seems fine, but isn't this a major breaking change for shallow mounted snapshots? I am kind of surprised you didn't have to change other tests asserting against wrapper.html().

I could be missing something - it's been a while since I touched this part of the code base.

[MitchLillie]

Yes, that's true. This will break any shallow mounted snapshots that pass a function to a child property. So definitely a breaking change, but in our repo with 2601 tests, only four had this problem. If you look at the linked issues, most folks are simply skipping testing or coverage on these problem areas, because the snapshots are completely non-deterministic between environments.

[lmiller1990]

Alright, good to know. The next release will be a minor (1.2.0) release in this case. I'll try to do it this week. Thanks!

[lmiller1990]

@MitchLillie it's out. Can you give it a test in your prod code base and let me know if we missed anything, or you have any unexpected breakages?

[MitchLillie]

@lmiller1990 Just tested, looks good on our end. We had 7 total snapshots that needed updating, out of 39 total. That's more than the original 4 because 3 were referencing mocked functions, which were already ignored in test coverage, so didn't have this issue.

[pazderka]

Version 1.2.0 has resolved most of the issues that i have had with rendering snapshots deterministically, however i have still one failing scenario.

I am using Vuetify and the snapshot test fails for the prop allowed-dates which Vuetify DatePicker exposes. This prop seems to produce unexpected results in snapshot tests, the failure looks like this, for example:

                <div
                  allowed_dates="() => {
                  /* istanbul ignore next */
    -             cov_1o1cojjd49().f[12]++;
    -             cov_1o1cojjd49().s[34]++;
    +             cov_kawvohiv4().f[12]++;
    +             cov_kawvohiv4().s[34]++;
                  return true;
                }"
                  class="DatePickerMenu-stub"
                  label="common:created_from"
                />

Any ideas how to get this to work?

[lmiller1990]

I am not sure why coverage is even showing up in the snapshots. My guess is this needs to be explored in vue-jest probably - not sure there is something to be done here 🤔

I have not much experience with code coverage, but happy to help investigate if you are interested in doing so. Can you reproduce this easily with a fresh Vue cli project + some config?