Intermediate React

Intermediate React Writing a Component Test with Jest


This course has been updated! We now recommend you take the Intermediate React, v5 course.

Check out a free preview of the full Intermediate React course:
The "Writing a Component Test with Jest" Lesson is part of the full, Intermediate React course featured in this preview video. Here's what you'd learn in this lesson:

To write your first React component test, create a magical __test__ folder which Jest knows to run all tests inside. You'll create your first test with Jest's toMatchSnapshot method. Brian also shows how to get Jest to pass ESLint.

Get Unlimited Access Now

Transcript from the "Writing a Component Test with Jest" Lesson

>> Brian Holt: So that's kind of the general tour of the application. Now, you want to go in and write some tests for this using Jest. So Jest is a testing framework built by Facebook, and it's what they actually use themselves to test React. It's not necessarily exclusive to React, in fact, I use Jest extensively to test Node applications.

[00:00:21] It's really good at testing Node applications. So Jest is useful beyond just testing React applications, though it is also quite good at that. Jest is actually, underneath the hood, mostly Jasmine if you've ever used Jasmine testing before. It uses the same testing, or matchers and those kind of things that all stuff it's built into Jasmine.

[00:00:44] You don't necessarily need to know that but just know that, that's what actually what's doing the testing is Jasmine. So you can look at the Jasmine documentation when we're using Jest.
>> Brian Holt: So let's go ahead and go install our testing solutions.
>> Brian Holt: So inside of your directory, the complete intro to react v4.

[00:01:09] We are gonna do npm install -D to install into the dev dependencies. Jest and react-test-renderer, make sure that you get renderer cuz it's a renderer that threw me off, it's also hard to say for me, okay? Cuz we're gonna install two independencies, one being Jest, right? The testing solution and one's going to be a renderer for React.

[00:01:42] That's not ReactDOM, cuz ReactDOM requires a browser to be present, right? So react-test-renderer allows this to be done inside of Nodes, we don't have to spin up a browser. So this goes way faster. Anything that has to use a browser goes super, super slow.
>> Brian Holt: So that'll take a second to install.

>> Brian Holt: So we're just gonna test one of our routes, right? We have this details.js page, that we're gonna test. Doesn't do a ton, it's just this page right here.
>> Brian Holt: This one, if it works.
>> Brian Holt: One of these is bound to work. Zorbo, that one worked. So we're gonna test this route right here that renders this page.

>> Brian Holt: So it has a componentDidMount, it has a modal that it does and a render method. So what I want you to do is I want you to go in to your application inside of your source directory. I want you to make a new folder and call it __, so two underscores tests__.

[00:03:05] Now, that's a weird name, why would I call it that? Well, the nice thing that Jest does for you, Jest has a bunch of just same configurations out of the box. It knows by default and it's under in an __tests__ directory, it's a test and so, it will run that for you automatically.

[00:03:22] You don't have to tell it where they exist. It just looks for those folders and runs everything in them. We can also put this in the same directory and call it like app.test.js and it would run that as well. So that's the kinds of things that it looks for.

[00:03:36] If you're curious where the double underscore thing comes from, it's actually from Python. If any of you have written Python before, double underscore means magical. So it magically will find these directions. So it's just kind of a forewarning, it's like hey, magical stuff happens because there's double underscores here.

[00:03:54] So, okay. So in here, make a new file, and we're gonna call that Details.test.js,
>> Brian Holt: Okay?
>> Brian Holt: So instead of the test directory, make a file called Details.test.js, and now we are gonna write some tests for,
>> Brian Holt: This particular route, so first thing we're gonna do is we're gonna import React from React.

>> Brian Holt: We're going to import, create from react-test-renderer, and we're going to import Details from ../Details, right? Because we're going upper directory to grab the details route, okay?
>> Brian Holt: Next thing we're gonna do is we're gonna write test,
>> Brian Holt: And we're gonna write a snapshot test.
>> Brian Holt: So let's talk about that for a second.

[00:05:08] First thing is, it's gonna say, hey, I don't know what test is. This project is using ESLint. So if you are using ESLint, the way that you can make this not be an error anymore is to go into your eslintrc.json, and you come in here and where it says env down here, just add a jest: true.

>> Brian Holt: And now if you go back in here, it's gonna say, test is a global that comes from Jest, I know what that is.
>> Brian Holt: Okay, and then the first thing that we're gonna do here is make a component. So I'm gonna say, create Details / like that.

[00:05:56] So now inside of c is gonna be an instance of this details. And then I'm gonna say, expect(c.toJSON()).toMatchSnapshot.