Check out a free preview of the full Complete Intro to React, v3 (feat. Redux, Router & Flow) course:
The "Snapshot Testing with Jest" Lesson is part of the full, Complete Intro to React, v3 (feat. Redux, Router & Flow) course featured in this preview video. Here's what you'd learn in this lesson:

Brian introduces Jest that enables snapshot testing. A snapshot test saves the visual look of the code and alerts the developer if the code is modified. Brian begins creating the Search.spec.js file which will run the snapshot test. - https://github.com/btholt/complete-intro-to-react/tree/v3-10

Get Unlimited Access Now

Transcript from the "Snapshot Testing with Jest" Lesson

[00:00:00]
>> Brian Holt: So what we're gonna be doing now is doing some testing with React. React is actually not too bad to test, providing you're not using a bunch of crazy libraries, cuz crazy libraries get pretty tough to test. Right now we're not doing anything too nuts, so it's not to bad.

[00:00:19] We are going to be doing Jest testing today. I personally really enjoy Jest, it's my testing framework of choice, but there's perfectly valid reasons to choose Mocha, or AVA, or any of those other ones, so feel free to switch to your favorite.
>> Brian Holt: Jest, in particular, is well-suited to test React, because it has something called snapshot testing, which we're gonna take a bunch of advantage of today.

[00:00:46] So something I didn't wanna tell you is that, if you wanna learn about specifically Mocha testing with React, you can watch version one of this course. You don't have to watch the whole course, you can watch just the section on testing. And that's available to you as well.

[00:01:04] Okay, so what I want you to do now, is in your JS directory, inside of it, I want you to create a new directory called __tests__. This is just a convention for creating tests, specifically to, I think AirBnB actually enforces it this way, that you have to kind of structure it this way.

[00:01:31]
>> Brian Holt: So, whatever, I just roll with it. [LAUGH] I've seen lots of people do it this way, so we'll do it too, okay. And now, inside of this test directory I want you to create a new file and call it Search.spec.jsx, you can call it search.spec or search.test, I don't care which one you call it.

[00:01:54] Both of those will automatically get picked up by Jest. I always, I just do spec, and I think the reason why I do that is that I've always done it that way. But if .test sounds better to you, then by all means go for it. So Search.spec.jsx, and what we're gonna do inside of here is we're going to import React from React.

[00:02:17] I guess it kind of bears mentioning that,
>> Brian Holt: There's lots of testing strategies. I'm just gonna show you probably the most simple testing strategy like how to structure your test, what to call your test. What I like to do is, if I have a search component, I like to have another file called search.spec.jsx, right?

[00:02:39] So that there's one to one mapping, right? So again, optimizing for deletability if I delete search.jsx, I know I can just delete this test along with it, right? It's an easy way of being able to tell what's tied to what. Okay, import renderer from 'react-test-renderer' and import Search from ' '../Search', okay?

[00:03:16] So react test surrender is gonna allow us to do some testing. Like, we're gonna be able to render out the search component and test it right, without actually having a dom underneath it, which is gonna be pretty cool.
>> Brian Holt: Okay, so one thing to know about Jest is underneath the hood, it's actually just Jasmine.

[00:03:36] Right, so if you've ever done Jasmine testing before, it's the same syntax. I've been told by the Facebook team that they reserve the right to change that, so just be aware of that. So some of you have seen, and actually in the last couple courses I did it this way, you can do describe blot, and then inside of it you do, it should do this test.

[00:03:57] I decided to simplify this and just do test. So again, there's several ways you can describe functions and have it assertions inside of it. I'm just gonna have a bunch of test functions. So this is all preference, this is all correct, right? I'm just going with the simplest one to teach, really.

[00:04:17] That's what I'm optimizing for, okay? And test is just a global function that Jest is going to inject into this function. So it's gonna be globally available. So you don't have to import it from anywhere.
>> Brian Holt: Okay, so Search renders correctly.
>> Brian Holt: Okay, and that's gonna be a callback function here.

[00:04:41] And what we're gonna do is we're gonna say const component = renderer.create(<Search />).
>> Brian Holt: Let tree, or actually const tree, const tree = component.toJSON(). And then expect(tree) toMatchSnapshot().
>> Brian Holt: So let's say that if you're gonna have your linter yelling at you right now, because it's like, I don't know what test is, and I don't know what expect is, and I'm pretty sure you're just making it up.

[00:05:40] That's what ESLint is telling you right now. So let's go prove to ESLint that we're not making it up. Go to your ESLint.json, and inside of here we're gonna add one more end, and it's gonna be jest.
>> Brian Holt: This is telling ESLint hey, ignore all the global things it jest injects.

[00:06:08] The kind of trade-off here is that is if you put inspect inside of your normal code, where it won't be available, it's gonna not flag that. So it's a trade-off, but it's not really bitten me in the butt yet, so I I feel pretty good about doing it still.

[00:06:22] But just so you know that's the tradeoff that right now I'm making for you. Okay, go back to your spec.jsx. And sometimes my linter is a little bit slow to catch up that there goes, okay.