Check out a free preview of the full Intermediate React, v3 course:
The "Snapshot Testing" Lesson is part of the full, Intermediate React, v3 course featured in this preview video. Here's what you'd learn in this lesson:

Brian demonstrates how to setup and use snapshot testing in Jest to verify code is correct when the snapshot was taken. Snapshot tests are low confidence, low cost ways of writing tests that also keep track of future changes.

Get Unlimited Access Now

Transcript from the "Snapshot Testing" Lesson

[00:00:00]
>> Just famously has a feature called snapshot testing, and I'm going to leave to you if you think this is a good idea or not. But we're gonna do it together so that you can see what it's like. So create a new test here and we're going to do this with results.js.

[00:00:17] So create a new file inside of the test directory, call results.test.js. And we need to get one more thing out of here, we're gonna say npm install-Dreact-test-render dots. So, render that one always throws me off @17.0.1, this is from the official react team. This is how they do, this is a test render that they provide to you.

[00:00:57] Basically, we're gonna do is we're gonna create low cost, low confidence tests. Okay, so now that we have that we're gonna say import expect and test from at jest slash Global's. We're going to import create from react, test, render. And we're going to import results from ../ results.

[00:01:37] Okay, we're gonna test first of all that it renders. Let's just do a snapshot with no pets, okay, async I guess I'm going to disappear doesn't have to be async. What we're gonna do is we're gonna say const tree = create results, pets = empty array. And then, we're gonna say two JSON like that.

[00:02:15] Okay, and then from here we're gonna say expect tree. Too much snapshot Now what did I just do here? Sometimes I ask myself that's What I did, this I need it from up here, there we go. So I render this out and then I call this function called to match snapshot what this is gonna do the first time it runs, it's going to dump out to a snapshot file and then in the future it's gonna check if this has changed at all.

[00:02:54] So let's just run it so you can see what that looks like. The first time is going to say I'm gonna create a snapshot, did one snapshot written. So let's go take a look here in our test directory, there's a snapshot directory. You'll never write to these but you will check them into Git.

[00:03:14] This is what it looks like when no pets found, right? This is exactly what I expect it to look like, so that's what a snapshot is. This is the markup that I found, and in the future it's going to check to see if this has changed, right? So if I go into results and say no pet found, and I do that and I run this again.

[00:03:42] It's gonna fail, right, because it is gonna say, Hey, I expected to see no pets found like this. And I found no pets found with question marks. So it's just making sure that over time your app is not changing unexpectedly. What if I expected this change? What you would do is you'd come back in here and you would just say let's see it's good.

[00:04:08] Remember mpx Jess help is update snapshots or dash you okay? So if I run npm run test with nmp ---u like that. This is actually gonna say, hey, I know that the snapshots are now correct, please rewrite them. And now if you go look in here, one at all past it says one snapshot updated, and you can look in here.

[00:04:35] Now the question marks are in there. That's actually not what I want. So I'm gonna go erase those, but that is what a snapshot test does for you. That's this, now, we wanna like render it with some real pet data. So I provided you some here in the snapshots.

[00:04:57] So if you wanna just import all of this here, the other thing you can do is you can actually just grab it directly out of the API, which is really easy too. It's the pets v2API/pets. So if you go to that, and then you can just raw data here.

[00:05:21] We'll just grab all of the pets out of here, whatever is easier for you, you can also grab it from my notes. I was just having a hard time doing that on my little Mac trackpad here. So there's a bunch of places you could put this as like a test data.js, you could put that in like it's something you could import.

[00:05:42] I'm just gonna copy and paste it here, I know it makes my tests really long. But it's that's okay with me const, what did I call this in here Pets = blah. And let's just go ahead and get rid of all these line breaks so I'll find > Shift+Enter, or I can just copy one of these.

[00:06:13] Find all the line breaks, and replace that with, Nothing. And that'll make it a little bit more dense, and I just have to go back and add line breaks, but luckily prettier is very good at adding line breaks for me. Okay, so now I can go down here to my tests, and then I'm going to say test.

[00:06:43] I guess we need to, we're gonna need a static router up here as well, so we're gonna say import. Create, right no, we don't, we don't need that, we need Static router from react router dom like that down here at the bottom test, that Renders correctly with some pets.

[00:07:26] And when I say const r equals create render r. When I say r.render Results, Pets = pets. And then we're gonna expect r.get renderedoutput. To match snapshot. I think they have to wrap this in static render because I think this has links it will, Okay, so now if I run this npm run test, What is failing here?

[00:08:43] Test utils create render is not a function, right, I need shallow from up here, so, test render I'm also gonna have to add test render/shallow. And you can actually just replace that, cuz it doesn't matter the old can use. So actually at this point then we don't need static router, so we can get rid of that.

[00:09:30] So let's explain that what's happening here, let's go ahead and run this, make sure it works. Okay, and then we'll look at our snapshot here. So, one big thing about the test render and snapshots is for the most part, It'll actually render all the way down the tree.

[00:09:53] So it actually render out all these individual pets as well, so we'll have all the links, it'll have all the all that stuff that comes with pet.js, right? It's actually going to render all of this markup with the images. And for the most part, I'm writing right now a test for results.js.

[00:10:07] I actually don't care what pet looks like because the pet tests should cover pet.js and the results test should only cover what's in results.js. Why do I think that? Because if the test and results suggest fail, I don't want it to fail because something had failed, right? I want it to fail because something results failed, right?

[00:10:28] So I'm trying to cut down my time from failed tests to finding bugs. Right, so everything should have its own set of tests. So that's why I'm doing this shallow render. The shallow render says like, cool, I'm only gonna render out until I find like another layer layer of abstraction to another level of components.

[00:10:46] And then I'm only going to render that, so that's what I did here with pet. It's not rendering pet, it's just rendering everything that's going in as props to pet Make sense? That, Is it so, we could have rewritten this and we could have done this with all the rendering down so you see all the divs and images and pets but I think that's a bad idea.

[00:11:10] That's exactly what this shallow renders for oops, we want that in results test such as this one. That's what this shallow renders for, we don't need that anymore, either.