DEV Community

Cover image for Jest partial snapshot matching
Chris Bongers
Chris Bongers

Posted on • Originally published at daily-dev-tips.com

Jest partial snapshot matching

Now that we first looked at snapshot testing, you might already have come across some weird use-cases.

For instance, what if your data returns a date object?
Or are your IDs dynamic and ever-changing?

This means only a part of our snapshot should match.

Jest partial snapshot matching

Let's take the following test, for instance.

test('snapshot testing', async () => {
  const randomFact = {
    id: Math.random().toString(36).slice(2),
    fact: 'Chris is writing about Jest',
    createdAt: new Date(),
  };

  expect(randomFact).toMatchSnapshot();
});
Enter fullscreen mode Exit fullscreen mode

If we run this code, our snapshot will be generated nicely, and the test will succeed.

exports[`snapshot testing 1`] = `
Object {
  "createdAt": 2022-03-30T04:36:39.987Z,
  "fact": "Chris is writing about Jest",
  "id": "eq8b6a67yjb",
}
`;
Enter fullscreen mode Exit fullscreen mode

However, what do you think will happen on the next run?
Correct, it will fail on both the createdAt and the id since those will be different.

Failing snapshot

To fix this, we have to make sure Jest knows that the createdAt can be any date, and the ID can be any string type.

Luckily for us, it comes with this function, inside the toMatchSnapshot function you can define what objects should be made of like this:

test('snapshot testing', async () => {
  const randomFact = {
    id: Math.random().toString(36).slice(2),
    fact: 'Chris is writing about Jest',
    createdAt: new Date(),
  };

  expect(randomFact).toMatchSnapshot({
    id: expect.any(String),
    createdAt: expect.any(Date),
  });
});
Enter fullscreen mode Exit fullscreen mode

Note how we didn't add the fact. This means this will still check uniquely for each snapshot.

Now make sure to run your next test while passing the update flag.

npm run test -u
Enter fullscreen mode Exit fullscreen mode

And after the update, your snapshot should look like this:

exports[`snapshot testing 1`] = `
Object {
  "createdAt": Any<Date>,
  "fact": "Chris is writing about Jest",
  "id": Any<String>,
}
`;
Enter fullscreen mode Exit fullscreen mode

Perfect!
We now have a unique date check on the createdAt field and a string check for the id.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Top comments (0)