Complete Intro to React, v2 (feat. Router v4 and Redux) Snapshot Testing with Jest

Transcript from the "Snapshot Testing with Jest" Lesson

[00:00:00]
>> Brian Holt: All right, unit testing. Like I said the former version of this workshop v1 uses Mocha, Sinon, Chai, and then also Enzyme to do testing. None of that is outdated, like that's still as of this moment in time and probably going forward, since that's a pretty slow moving library.

[00:00:20] Doesn't really need to be fast moving because it already does everything it needs to do. That's fully in date, if you need to check that out, go do that. If your into Mocha, Chai, and Sinon perfectly valid thing to do. But today we're going to be talking about Jest.

[00:00:39] So Jest is a library that came out of Facebook. And it came out, I was still working at Reddit and we migrated our tests to be on Jest. It wasn't a big deal cuz we were already on Jasmine. So if you've ever used Jasmine unit testing, Jest encapsulates Jasmine for now.

[00:00:57] I've heard stirrings that they're gonna move away from Jasmine, but that's a rumor. I was using Jest when I was at Reddit and it was just when it first launched. And so, we migrated from our Jasmine test to Jest and it was a nightmare. It was just a train wreck.

[00:01:14] The Jest that they released at that time was, they took Jasmine and just bastardized it, they just made it worse. And so, we ended up actually spending time to migrate off of Jest. And I'm usually not one from, like migrations usually go poorly, in my opinion, for the most part.

[00:01:33] But we actually did take the time to migrate off on to Mocha.
>> Brian Holt: So when I heard that Jest was coming around and people started using it again, maybe a couple month ago here. I was really skeptical, because I had been burned personally, and deeply, and spiritually by Jest, previously.

[00:01:52] So I was just not very apt to move to this new one. However, I got some nudgings and eventually people said like, look, there's cool new features and it's worth it and it's fast. All sorts of things, things I was not expecting to hear. And then, I was tweeting with Kristoff, who's one of the, I'm sure I'm saying his name wrong, but Kristoff, that's one of the core maintainers of Jest.

[00:02:17] And he said that the only thing that this Jest, and that Jest that I ran back then have in common is the name and the logo. They've totally rewritten it from the ground up. And he said that they almost called it something different because so many people were so burned out.

[00:02:32] And he's like, but I love the name and I love the logo, so we kept it. So if you've also been burned by Jess, know that this is actually a totally separate library. It's still built on Jasmine, now luckily Jasmine 2 which is a much better library to work with than Jasmine 1.

[00:02:47] But all the really crappy parts of Jest 1 are not, I don't even know what version it was. But the previous version of Jest are all gone. It used to do this crazy auto-mocking behavior which was just really painful to deal with. This version Jest can, but it's off by default and thank God, cuz it was just the worst.

[00:03:08] Seriously, I still have nightmares of writing [CROSSTALK].
>> Speaker 2: They're wondering if you'd really come out and tell us how you feel about technology.
>> Brian Holt: Yeah, no, I have no problems sharing my opinions.
>> Speaker 2: [LAUGH]
>> Brian Holt: I have like PTSD from Jest. So yeah, but now it's really great.

[00:03:27] It's really cut down, it's a lot faster. It does a lot of really really great things for you. And it has a lot of really, really same defaults, which is good too. So, we're gonna write a unit test real quick. And we're gonna write a snapshot test, which is really, really new thing that Jest, I feel like I'm saying really a lot, it's super weird, it's really weird.

[00:03:55]
>> Brian Holt: Jest came out with this idea of what's called snapshot testing, which is a novel idea. Which I think is useful. I don't like writing tests, so anything that writes tests for me, I'm just like, yeah. You write that test for me, and it's awesome. So what Jest does is it renders your component out, it dumps that to a file, and then it just compares against that file in the future.

[00:04:19] So basically, you assure to yourself, this component is now well written, this is the way I want it to look. Now I want you to write a unit test to make sure that it continues looking like this. So in the future, it's gonna be compared against that first state that you had.

[00:04:36] And so anytime that component changes, you're gonna get a notification like hey, this change and it kind of gives you like a git diff of like, this is what it was like before, and this is what it is now. And if it looks good now you just say cool, update my test and it just updates it.

[00:04:49] If it looks bad then you know that you had a regression somewhere you can go fix it. So it's a really, really cheap test. Which is really easy to throw away. Which I think's really cool. God damn, I'm saying really again. I don't know what it is.
>> Brian Holt: So we're gonna create a file called Search.spec.js.

[00:05:10] Why do I call it .spec? Because I've always called it .spec. The nice thing is that Jest will find .spec.js files for you automatically. You don't have to configure it, it just knows where to find it. I think it all does, does that as well for .test.js and some other formats but that .spec.js is what I've always used.

[00:05:32]
>> Brian Holt: Another personal opinion here, you don't necessarily have to subscribe to this but that's what we're gonna do for this workshop. I like my tests living right alongside the component that they test. So I have search.js and I have search.spec.js in their same directory. I think that's useful because if I'm browsing through the files and I see search, the first thing I wanna see is the test research because that tells you how to use test.

[00:05:59] I think tests are useful as a way of documentation as well. So it's really nice that they're living right next to each other. Import React From 'react'.
>> Brian Holt: Okay, import Search from './Search'. And import renderer from 'react-test-renderer'. Which is a library provided by Facebook that helps you do these kind of snapshot tests.

[00:06:37] And I'm just gonna say test.
>> Brian Holt: Search should,
>> Brian Holt: Or I'm just going to say Search snapshot test.
>> Brian Holt: And that takes a callback. I wanna say, const component = renderer.create(<Search />).
>> Brian Holt: Const tree = component.toJSON(). And, expect(tree).toMatchSnapshot.
>> Brian Holt: That is it. That is how you write a Snapshot test.

[00:07:39]
>> Brian Holt: Doesn't even really seem fair, right. This doesn't really feel like a unit test. Typically you have to think like, okay, well given this case, it needs to look like this. The first time it runs it's just gonna say cool, I don't have a snapshot. Bam, just gonna dump it into a file and this is my brand new snapshot.

[00:07:54] Every time thereafter it's just going to compare real quick. I have this now, and I had this previously, what changed? Nothing, cool, pass. If it doesn't pass, fails the test and says, you changed here. Did you expect this to happen? If you do, you just rerun it with a flag saying update my test, and it's done.