Intermediate React Jest Snapshot Tests
This course has been updated! We now recommend you take the Intermediate React, v5 course.
Transcript from the "Jest Snapshot Tests" Lesson
>> Brian Holt: So let's talk about what a snapshot test is. For me, I like to write tests that are really quick to write and really quick to understand. So I don't expect details to change very often, right? It's a route that details page is finished now. So basically what a snapshot says is like, I want you to dump out all of the markup for this, and then fail this test if it changes in the future.
[00:00:28] I expect this to stay the same over time. In fact, it should, so if I come back over here to my thing, and let's say,
>> Brian Holt: npx, which will run something from my package.json. jest, so it's gonna run jest from my package.json,
>> Brian Holt: Jest already knows how to run babel out of the box it's already built into jest which is a nice feature of that.
[00:00:55] And you can see here that you have one test pass, cuz it assumes that The first time that you run it, it's going to be correct, right? We'll go verify that. One thing that you'll notice here is that it has WARNING, YOU CALLED JSONP IN A NON-BROWSER CONTEXT, that's fine.
[00:01:11] It's fine that we did that. We're basically using this petFinder client library, which if you try to run it in Node, it just doesn't do anything and it warns you. So you can just ignore that. In fact if you wanna make sure that you don't see that you just say, -- silent shut up jest, and it will just hide that as well.
>> Brian Holt: But you can see there I ran it once and the first time it says one snapshot written and the second time it's just hey everything stayed the same I'm gonna pass your test. So actually go into your browser really quick you can see here does this new snapshots directory, put the double underscore as well?
[00:01:50] If I look in it, have this details.test.js.snap, and if I look in there,
>> Brian Holt: if you render details for the first time it gives you a loading component, that's exactly what I expect, right? Because when it loads the first time, it's gonna mean a loading state that's what I want it to do.
[00:02:11] But what happens if I come in here to details.js.
>> Brian Holt: And I come in and say,
>> Brian Holt: not loading lol I don't know. Something different than it was expecting previously. So, if I come in here and say, RUN jest again it's gonna say, wow, wow, wow I was expecting to see loading...
[00:02:36] now, I got not loading lol, so it fails the test, right? Something changed over time, maybe I was expecting this, right? Or maybe I wasn't, like I changed some other ambient thing or I pulled in a different module. All I can tell you is like, hey this changed and here is what I saw change.
>> Brian Holt: Make sense so far?
>> Brian Holt: So what happens if I was expecting this to change? What if I need, like I was expecting this to always be like this, okay I rewrote this component, and now I wanted to look like this. Really easy, you just run it again with -u, I think that stands for -- update, but we'll just run it with- u.
[00:03:15] And now its just like cool, well you expected that so I updated your snapshot. And if I go look at my snapshot again, you'll see that it's updated. So now if i run it again, npx jest without the u.
>> Brian Holt: Everything passes.
>> Brian Holt: So let's talk about snapshot testing.
[00:03:38] One, don't go crazy with them. I know of people that's like, I'm gonna snapshot everything. No, it's just a good easy-to-write, low confidence test that like. This looked like this before and I expect this to continue looking like this until I don't and then I will update it, right?
[00:03:54] So it's a really good way to write a low confidence test that these things are going, but it's two lines, right? If you go look at the test again, like how easy it is to write this. This is phenomenally easy to write, that's why I think these are good test to just do some quick, little confidence test to just value.
[00:04:12] It's like this runs, this renders, there's no errors, and it comes out with what it came out with previously. It's a really easy way to prevent regressions.
>> Brian Holt: The other thing I was gonna say here. Some people like to do match inline snapshot. So let's just run that again, to show you what that looks like.
>> Brian Holt: It'll actually go and rewrite, notice I didn't write this, it actually went in and wrote this for me. So we'll actually write directly into the test. Some people like that, I prefer not, I actually like the separate snapshot files. Because sometimes this can be very long, right?
[00:04:55] You can have a huge component that has a lot of mark up, it makes this testing file to look not good. So I would not suggest it, it also said like, hey I see a snap shot that no one's using, that's obsolete. So to warn you about those kind of things too.
[00:05:13] So let's go make that back to snapshot, save that,
>> Brian Holt: and run npx again.
>> Brian Holt: Cool. And we'll go back to our details page and make that loading again. And we'll run it with npxrun-u to re-update that snapshot again. Now the question people often ask me is, should I check in my snapshot files?
[00:05:40] Yes, you should. Generally, you don't check in generated files. That's kind of a rule of thumb with gip. But this one, if it runs on my computer this way, it should also run on her computer the same way, right? So it should run on all the various developers computers exactly the same way.
[00:05:55] So you should check in your snapshots. It's a part of your tests.
>> Brian Holt: I'm a big fan of Jest. I think it makes testing really easy. I do like the snapshot feature, but again, don't go crazy with them and just realize what they are. They're easy to write, low confidence test.
[00:06:12] They're not going to replace normal unit tests. They're another layer of testing in your testing strategy. As a side note, I think they're super useful for APIs, right? The nice thing about snapshot is that anything that you can write out to JSON can be a snapshot test, right?
[00:06:32] So an API response would be a perfect thing to write a snapshot test for. So definitely take that forward with you.