This course has been updated! We now recommend you take the Complete Intro to React, v8 course.
Transcript from the "Testing React with Enzyme" Lesson
[00:00:00]
>> [MUSIC]
[00:00:03]
>> Brian Holt: Now that we've got now the moco 101 out of the way, let's actually go write real test for react cuz that's actually what I wanted to talk about.
>> Brian Holt: No, it's up.
>> Brian Holt: Okay.
>> Brian Holt: So we're gonna pull in React as well.
>> Brian Holt: You already have expect.
[00:00:32] We're gonna pull in search cuz that's actually what we're gonna be running our tests against. That's gonna be ../js/Search. We're gonna pull in an enzyme out of a testing helper and actually we're just gonna pull shallow out of it right now. So it's gonna be shallow
>> Brian Holt: Enzyme
[00:01:00]
>> Brian Holt: Okay, and we're gonna get rid of our totally worthless tests right here. And we're gonna say should render the brand, right? So for example, say you were doing something in for whatever reason it started dropping like you're branding from the page like that's a really bad thing that you don't wanna drop your brand from the page.
[00:01:22] So after that happened maybe we'd go in and write a test to make sure that this is always definitely rendering the brand every single time you're into the page and this markup is showing up on the page. So let's go ahead and make a test that does that.
[00:01:34] So we're gonna say const wrapper = shallow(search). So what this is gonna do, let's see, I'll just walk over to search and show you what's gonna happen here. So what shallow rendering is gonna do is it's going to render just what's in search and none of it's children.
[00:01:58] So basically, we have a bunch of show cards here. It's not actually going to reach into show cards and render that as well. It's all gonna render the stuff that actually exists inside of search. Is that makes sense? Now the reason why we want to do this, in this particular case we're actually, we want to test search, right?
[00:02:14] And then later we'll test show cards separately, right? But we wanna find problems with search and we don't want our search test to fail when it's actually a show card failing, right? One of the useful part of tests is what we want to tell us exactly what's going wrong where it right.
[00:02:28] And so far if our search tests fail when it's really show cards failing. That's like misleading, right? We're gonna go dive into search first when we really should be diving into show cards. We follow, that make sense? So what it's gonna is actually in a set like give us stubs, instead of show, yeah.
[00:02:45] Instead of actually what it should be.
>> Brian Holt: So let's go see how we would test that. I'm gonna say expect(wrapper.contains) and then I'm gonna just write some jsx here.
>> Brian Holt: Okay? So, I think this is pretty straightforward. This wrapper which is what's coming back from enzyme or that is right there.
[00:03:32] It has a method called contains and basically I'm gonna say I'm gonna give it jsx component like I expect this to be in there somewhere, right? I don't care like really care where, what is important to me, because I might move the brand to be somewhere else, right?
[00:03:45] But I don't want my unit tests to fail because it is actually still in there, right?
>> Speaker 2: Question, can you explain shallow again?
>> Brian Holt: Yeah. So there's a couple different depth of rendering, and I think we actually do touch all of them. So yeah, we'll talk about all the different depths of rendering you can do.
[00:04:05] But the basic gist is it's going to render like this div, the header, the H1, but it's going to get down here to the show cards, and it's just going to give us the stub, where it's going to say, this is a show card. But I'm not actually going to go into show cards and render everything in there.
[00:04:18] So it's shallow in the sense that it renders just that component and none of its children. It just gives you stubs for all the children. That's the gist of it. Why is this advantageous as well? This is way faster. It's like ten times faster than trying to render all the children, right?
[00:04:37] That's another big advantage of this.
>> Brian Holt: And just a problem with testing react components in general is they're pretty slow to test.
>> Brian Holt: So yeah, that's the gist of it. Any questions about this expectation right here? Hopefully that makes sense of what we're testing here. Right, so we're basically testing, does this end up getting rendered, right?
[00:05:02] That's over testing here.
>> Brian Holt: Yeah. So let's save that and let's try it.
>> Speaker 3: [INAUDIBLE]
>> Brian Holt: So yeah, the reason why I didn't make a jsx because mocha is looking for JS files. And it just makes it minorly more complicated if you call it JSX, and I didn't find that worth it.
[00:05:29]
>> Speaker 3: Do you need your actual components to be JSX?
>> Brian Holt: Do I need the components to be JSX? They don't have They don't have to be, they can be JS files.
>> Brian Holt: But I get like it's no longer advantageous to me to call this JSX in the sense of like, this is never getting sent down to the server this is only ever being run.
[00:05:49] I'm sorry this is never getting sent down to the client. This is only ever being rendered server side for my debugging purposes.
>> Brian Holt: At personal preference, it that's the bottom line here right? Up to you. If you want if you really feel strongly about that then you can go ahead and go do that.
[00:06:05] You just have to wrangle with Mocha to get it to work. So what I'm gonna do here is I'm going to run MPM test.
>> Brian Holt: And it passes. So let's go make it fail. Go to search and changes to be like LOL something else, right? [INAUDIBLE] Just so it's incorrect now.
[00:06:34]
>> Brian Holt: And you can run an NPMT right? That's the same as NPM Test
>> Brian Holt: And now you can see that it's no longer rendering the brand. So it fails when they expected to.
>> Brian Holt: Questions about that?
>> Speaker 2: There's a question on what's your philosophy on what is and what is not worth unit testing.
[00:07:03]
>> Brian Holt: But I'll reserve my judgments for the end. I have, like I said, unpopular opinions on the subject.
>> Speaker 4: Can you customize the assertion there so that instead of saying expected false forgot true you say expected as video forgot false or something?
>> Brian Holt: Yeah, I think the answer to that question is yes, but I cant remember of the top of my head.
[00:07:33] Yeah I mean that's not superuser it false to be true.
>> Brian Holt: So,
>> Brian Holt: Yeah, there's probably things you can do better than that. In this particular case it's gonna be hard to get like what actually happened, right? Because you have to separate this out.
>> Brian Holt: So that's a little bit more difficult to get.
[00:07:59] Okay. Good question though. Hopefully, you'll make this sufficiently explain, that's the point of that is to be more explaining what that does. Wanted to show you this as well. I think this works. I think wrapper.debug,
>> Brian Holt: Let's see if that works. It might not work. There's basically you can have a dump out all of its information.
[00:08:32] Cool. So now it actually does, it dumps out everything that it got, right? So you have the div, the class name you can actually see the HTML that's being rendered inside the shallow. Render, but here's the interesting part to me. Notice it's actually giving you these show cards and it is telling what props are getting passed down, right?
[00:08:52] Which is kind of interesting, right? But notice is not actually the actual HTML from the show card, right? This is actually still a shallow rendering of it. So this is what I mean when it's a shallow render cuz it's putting show card instead of the actual HTML that show card would typically render.
[00:09:10] So that's a useful thing if you're like unit test or not working the way you expect them to and you can actually dump out this to bug and see what's going on. Yeah.
>> Speaker 2: There's a question, so shallow means that we will not render any my guess of the show card in I guess it's harder in the chat here.
[00:09:32] I'll have and clarified I went but the other question was Is it possible to test for a partial match like testing if I have a H1 without having to match all the class name?
>> Brian Holt: Probably? [LAUGH]
>> Brian Holt: I wonder if you could do something like this.
>> Brian Holt: The answer is I'm not entirely sure.
[00:09:55] But let's give it a shot and see what happens.
>> Brian Holt: Nope. It doesn't work. There might be another way to do it. I'm just unaware of what that is at this moment. So if you're interested in that I'd say go check out the enzyme docs and see if you find some clever way to do that.
[00:10:20]
>> Brian Holt: Other questions?
>> Speaker 4: Yeah I actually have a question Is contains part of enzymes there is a part of MOCA.
>> Brian Holt: Enzyme, good question.