Add snapshot property matchers

[rickhanlonii]

Summary

This PR introduces a new snapshot testing concept I'm calling "property matchers" (feedback on naming welcome)

Closes #5847

Details

Implementation

You can now pass an object with asymmetric matchers into toMatchSnapshot which are then written to the snapshot instead of the original values:

Property checking

These matchers are checked before the snapshot is written or checked:

Note: it's weird that there is a note to re-run with -u to update, which will not update the snapshot since it's not the written value that fails. Recommend following up with a change to the reporter logic.

Also note: a diff would be a nice followup

Documentation

Expect

Snapshot Testing

Test plan

• Added integration tests
• No existing tests changed

[rickhanlonii]

Thoughts on exposing these to matchers and how?

[SimenB]

maybe stick them in this.utils instead of directly on this?

[rickhanlonii]

I had the same thought, will move

[SimenB]

also needs to be doced, fwiw

[rickhanlonii]

@thymikee already handled all the hard stuff for me, thanks!

[rickhanlonii]

Unrelated but needed on master

[codecov-io]

Codecov Report

Merging #6210 into master will decrease coverage by 0.1%.
The diff coverage is 21.05%.

@@            Coverage Diff             @@
##           master    #6210      +/-   ##
==========================================
- Coverage   64.22%   64.12%   -0.11%     
==========================================
  Files         220      220              
  Lines        8483     8501      +18     
  Branches        3        4       +1     
==========================================
+ Hits         5448     5451       +3     
- Misses       3034     3049      +15     
  Partials        1        1

Impacted Files	Coverage Δ
packages/jest-snapshot/src/plugins.js	80% <ø> (ø)	⬆️
packages/jest-snapshot/src/State.js	0% <0%> (ø)	⬆️
packages/jest-snapshot/src/index.js	56.14% <33.33%> (-6.91%)	⬇️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 73a656d...4dcd25b. Read the comment docs.

[SimenB]

This is so awesome, I'm excited!

Question - what about expect.objectContaining?

expect({ target: { value: "some value", key: 13 } }).toMatchSnapshot({
  target: expect.objectContaining({ value: "some value" })
});

To copy your original example:

it('will check the matchers and pass', () => {
  const user = {
    createdAt: new Date(),
    id: Math.floor(Math.random() * 20),
    name: 'LeBron James'
  };

  expect(user).toMatchSnapshot(
    expect.ObjectContaining({
      name: 'LeBron James'
    })
  );
});
 
// Snapshot
exports[`will check the matchers and pass 1`] = `
ObjectContaining {
  "name": "LeBron James",
}
`;

perhaps?

If that already works - mind adding a test?

[SimenB]

This won't handle deep objects - should it be a deep merge instead?

[rickhanlonii]

Great catch, i'll add an integration test for this as well

[ftes]

Any follow up for this?

[SimenB]

#6528

[SimenB]

weird to use scopes here, although I get why you do it. why not just a descirbe around it and multiple tests instead?

[rickhanlonii]

My thoughts as well - I was copying the style from the rest of the suite. I'll update the suite 👌

[rickhanlonii]

@SimenB thanks!

expect.objectContaining works for properties of the object as in:

But not as the passed argument. That use case is interesting - what's the benefit of:

expect(user).toMatchSnapshot(expect.objectContaining({ name: 'LeBron' }));

Over

expect(user).toEqual(expect.objectContaining({ name: 'LeBron' });

[SimenB]

what's the benefit of:

At the top level, not much, only at a deeper level. Seeing as that works, I think my concern has been addressed! I'd love to see an extra test for it, though.

EDIT: I suppose, expect({ name: 'LeBron', signDate: new Date(2018, 0, 0) }).toMatchSnapshot(expect.objectContaining({ name: 'LeBron' }); Not sure how useful that is?

meh, ignore me

[orta]

👍 nice idea

[cpojer]

Wow, I love this. Let's get it in for Jest 23.

[thymikee]

I think it will be better to go with something like this:

### `.toMatchSnapshot(?propertyMatchers|snapshotName, ?snapshotName)`

Even though we explain this later

[github-actions]

This pull request has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
Please note this issue tracker is not a help forum. We recommend using StackOverflow or our discord channel for questions.