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

Transcript from the "Shallow Testing with Enzyme" Lesson

[00:00:00]
>> Brian Holt: I put something here in show-card to interest something, I'm gonna go ahead and assert that's kind of problematic about this. I changed something in show-card yet my test in search is failing and I think that's a problem. Other people may disagree with me. I think it's a problem because if there's a problem with show-card, I want my show-card test to fail, right?

[00:00:24] And if I have a problem with search, I want my search test to fail so it tells me exactly where my problem is. Well, why is this failing? Well, I have this test render and it renders everything underneath search. It'd be really nice if it could only render everything underneath search that only go one layer deep.

[00:00:42] Only have a shallow render and not necessarily have all of the components underneath it render as well. And that way those tests can fail, so if I have a problem with show-card, only show-card fails and search doesn't fail. Luckily there is actually a way to accomplish this. And we're going to bring in, excuse me, another library called Enzyme to do so.

[00:01:06]
>> Brian Holt: But first let's go to package.json.
>> Brian Holt: And I'm sick of it writing all that stuff. So I'm gonna say test = "NODE_ENV=test jest", or whatever flavor of shell that you're using.
>> Brian Holt: Okay, now I can just run npm run test, everyone's happy, right, npm run test.
>> Brian Holt: Yeah, I broke it, so that's why.

[00:02:04] But just as an npm sidenote, instead of npm run test, since supposedly we should be testing our code, right, a lot npm gives you the convenience of saying npm test that also works. Or you can actually even go as short as saying npm t.
>> Brian Holt: And that always corresponds to the test in scripts.

[00:02:25] That's just a shortcut that they gave you. I think start does that as well, but I think those are the only two that it'll do that.
>> Brian Holt: Cool, so come back to spec. And we have that in our package.json, so we're gonna move from react-test-renderer to using what's called Enzyme.

[00:02:48] Enzyme is a library from our friends over at Airbnb. It is not necessarily the official testing library of React because they refuse to bless any one library as that. But it is the library that Facebook uses, which pretty much makes it official.
>> Brian Holt: We use Enzyme, if you're gonna be testing React, you're gonna be using Enzyme or you should.

[00:03:13]
>> Brian Holt: So what I'm gonna do here, is I'm gonna say, import { shallow } from 'enzyme'.
>> Brian Holt: And we're going to import { shallowToJson } from 'enzyme-to-json',
>> Brian Holt: Which is not from Airbnb. It's from someone else that's really smart. I don't remember who it is.
>> Brian Holt: And we're gonna slightly modify our snapshot test down here.

[00:03:51] So I showed you the other one, initially, that's the barebones one. But I think the Enzyme way of doing it's a little bit better. So we're gonna say shallow here and tree is going to be shallowToJson.
>> Brian Holt: Component and then the last line stays the same.
>> Brian Holt: So to talk about shallow.

[00:04:27] Shallow does exactly what I was describing a few minutes ago, which is that it's going to render out everything in search. But it's not going to go any deeper than that. So it's gonna hit show-card and it's just going to say, okay, here's another component. This is the component, this is the properties that we'll receive, but I'm not going to render that component at all.

[00:04:46] I'll show you what that looks like. But it only goes one layer deep. ShallowToJson, DumpSetToJson, which then you can do a snapshot test on. The other thing I should tell you about jest in snapshot testing, all it does is compare one JSON structure to another. That's all it does.

[00:05:05] So if you're testing server responses for your node server, you can just dump that to a JSON structure. Do a snapshot test on that and there you go. You just roll with that. So anything that you can dump to some sort of JSON structure, you can do snapshot testing on.

[00:05:21]
>> Brian Holt: Which I think's pretty cool.
>> Brian Holt: Okay, save that, come back over here, say npm test. It's gonna fail miserably now because a lot has changed.
>> Brian Holt: injectEnvironment can be called once. That's new.
>> Brian Holt: No cache. I can't imagine that would be the reason, but.
>> Brian Holt: Yeah, yeah, that's the problem here.

[00:06:00] So we have render array here, which is actually used internally in Enzyme. So you actually have to dump that. So this line right here, line 3, import renderer from react-test-render, drop that line.
>> Brian Holt: So now, if you look up here in the green, this is what you expect.

[00:06:30] You see all these divs, right? With Club de Cuervos, Making a Murder, right? But if you look down here at the new output, it just outputs the jsx version, right? So it says, okay, well, this was a ShowCard and here's all the properties I got with it. imdbID poster, right?

[00:06:50] And that's what we actually want. So we're actually gonna go put that to a package.json. So go back to your package.json. Underneath test, we're gonna have one called update-test, which is going to be npm run test -- -u. Npm run test -- -u. Which you're gonna call every time you wanna update your tests.

[00:07:23]
>> Brian Holt: That way you don't have to remember the flag because I am terrible at remembering flags, so I refuse to.
>> Brian Holt: Save that, come back to your terminal and say npm run update-test. And now we have one solid snapshot test. So this is nice because ShowCard can go break in whatever way it wants to.

[00:07:54] And it should fail your ShowCard test that you'll write later. Well, I'm not gonna write it, but you should write it. [LAUGH] But it should fail the ShowCard test and it should not fail the search test.
>> Brian Holt: Okay, I'm going to go take out that h3, yeah.
>> Brian Holt: Any questions about snapshot testing?

[00:08:28]
>> Speaker 2: How did you get it to print the JSON out in your terminal, when you run the test?
>> Brian Holt: To print out this stuff? I failed the test. Yeah, so when it fails, [COUGH] excuse me, it'll print out the div.
>> Speaker 2: Okay, it's really cuz I didn't do the ShowCard.

[00:08:53]
>> Brian Holt: Any other questions?
>> Speaker 2: There's just a little general confusion about when you would do this sort of testing.
>> Brian Holt: So generally I would take in a component that I wrote and just write a quick snapshot test for it. So I'm not gonna assert maybe for each component test or for each component.

[00:09:19] But maybe for important components or specifically display components. It's usually helpful.
>> Speaker 2: Yeah, they're saying things like, it should be more stable probably. If your output is changing a lot and you haven't quite got your design figured out and things like that-
>> Brian Holt: [CROSSTALK] Yeah, then it's just noise.

[00:09:35]
>> Speaker 2: Yeah.
>> Brian Holt: So it's a cheap test that easily breaks but it's easy to update, so that's the tradeoff.
>> Speaker 3: They're asking if we can do a test on ShowCard, it's
>> Brian Holt: One may, I will not. [LAUGH] We're gonna write two more tests, though. I'm just gonna test search, but you're welcome to go test everything else if you want to