Join egghead, unlock knowledge.

Want more egghead? It's 45% off for a limited time only!

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock All Content for 45% Off

Already subscribed? Sign In

Save 45% for a limited time.

Get access to all courses and lessons on egghead today.

Autoplay

    Use property matchers in snapshot tests with Jest

    Andy Van SlaarsAndy Van Slaars

    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.

    jestJest
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    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.

    Discuss

    Discuss