Use property matchers in snapshot tests with Jest

Andy Van Slaars
InstructorAndy Van Slaars
Share this video with your friends

Social Share Links

Send Tweet
Published 6 years ago
Updated 6 years ago

With the right process in place, snapshot tests can be a great way to detect unintended changes in any part of your application that can be serialized. By grabbing a snapshot of your data in a known state, it takes a relatively small amount of code to check new output against your snapshot on each test run. When the output you want to test includes volatile data such as random number or dates, you end up updating your snapshot on every test run and your snapshot tests lose their value. Starting with Jest 23.0, the toMatchSnapshot method of expect allows you to define property matchers for specific keys in objects. Now we can specify that a value is of a certain type, while ignoring the specific value. In this lesson, we'll see an example of an object with non-deterministic values, and use property matchers in .toMatchSnapshot() to verify types while allowing for variation in those values.

Instructor: [00:01] This createPerson function takes in a first name and a last name, and returns an object with those first name and last name values, along with an ID and a time stamp for when the object was created.

[00:10] I've also defined a snapshot test that invokes createPerson, and calls expect toMatchSnapshot on the resulting object. When we run this test for the first time, it'll create a snapshot of this object. On future test runs, it'll compare the new snapshot to the preexisting snapshot, and the test will fail if those snapshots are different.

[00:29] I'll bring up the terminal. In the terminal, I'm going to use Yarn test to run my test in watch mode. We'll see that this test passes, and we now have a snapshots directory in our project. Let's hide the terminal, open up this snapshot, and see what it created.

[00:48] We'll see that we have a snapshot of our object with our createdAt time stamp, our first name, our generated ID, and our last name. If I close this and go back into the terminal, we're going to run these tests again.

[01:04] We'll see that this time it fails, because our ID's been regenerated, and it's now a new value. If I scroll up, we can also see that createdAt is a new time stamp. Let's get the terminal out of the way, and see how we can update our test to address this.

[01:18] In toMatchSnapshot, we'll take an object. In this object, I can define matchers for the individual keys in result. I'm going to start with ID, and I'm going to say that ID, I expect it to be at any value, as long as it's a string.

[01:33] I'm going to save this, and our tests are going to run again. We'll see that our test still fails. It's going to show us the same issue, that our IDs don't match. This time, the ID that we have in our snapshot doesn't match, not because we got a new ID, but because we're trying to match against any string.

[01:53] We need to update our snapshot to reflect this change, and we can do that by hitting the U key. It'll update our snapshot. Now, if we go look at that snapshot file again, we'll see that this has been replaced with any string.

[02:09] As long as there's a string in there, our tests is going to pass. Now, let's run our test one more time, and we'll see that we're still failing. If I scroll up, we'll see that we're failing because it generated a new time stamp that doesn't match the previous one.

[02:23] We'll get the terminal out of the way, and let's update our test one more time to account for that date change. I'm going to add another key to the object that's being passed into toMatchSnapshot. This'll be for my createdAt time stamp.

[02:37] I'm going to use expect any again, and this time, I expect any value that's a date. I'll save that, bring the terminal back up, and let's run those tests again. We'll see that we fail. When we compare, now, we're looking for any date.

[02:55] We still have the previously saved time stamp, so we'll update our snapshot with the U key. Now, our test will pass. We can look at our snapshot, and we'll see that createdAt can be any date. ID can be any string.

[03:11] If I go back into my test, now every time I run the test, even though those values are going to update every time that function is fun, the test will still match the snapshot each time.

egghead
egghead

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today