Check out a free preview of the full Complete Intro to React, v3 (feat. Redux, Router & Flow) course:
The "Testing the Search Field" 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:

To verify the search field is working properly, Brian uses the test framework to simulate a search term being entered and compares the filtered results to the expected show count.

Get Unlimited Access Now

Transcript from the "Testing the Search Field" Lesson

[00:00:00]
>> Brian Holt: So now we have two passing tests, right? And lets go ahead and make our third test which is going to be a little bit more involved but it's going to show you some of the cool stuff you can do with Jasmine. Well, and Jest, actually for that matter.

[00:00:13]
>> Brian Holt: So we're going to have a search word here. This is testing exactly what I was talking about earlier, that if I put black here. Did I get Black Mirror and Orange Is The New Black? So I'm gonna say const searchWord = black, okay? I'm gonna do component.find.

[00:00:35] Okay, compenent.find('input').simulate so we're gonna simulate an event on the input. All right, before I move on, something I did wanna talk about is here. So I did component.find(ShowCard) here, so that's one of the cool things about enzyme is you can use find either with CSS selectors, right? Which is what we're gonna do here with this or you can actually do it with React components.

[00:01:01] You can say, hey, I expect this React component to be found there, which I think's pretty cool, right? So it works for searching for shallowly rendered React components, which is why we import ShowCard up here. Okay, so now we're gonna simulate an event. It's gonna be a change event.

[00:01:24]
>> Brian Holt: And we're gonna give it the event that we want it to pass, which is gonna be event target value searchWord, right? This is the event that we want to happen on the input, right? Does that make sense? So if we go look at our input here and search that .JSX, we have this input.

[00:01:52] This is what it's targeting. And we wanna trigger this on change handler. That's the goal here. So this is as if the user had typed in black into the search box. That's what line 19 is currently doing.
>> Brian Holt: Okay, the next thing we're gonna do is const showCount=,

[00:02:20]
>> Brian Holt: And what we're gonna do, I'm just gonna shortcut this for you. We want it to do this particular thing right here, where it's trying to find, if we want to do this filter. Yep, right here. So I'm just gonna copy and paste this right now.
>> Brian Holt: Typically, you don't wanna duplicate logic in your tests.

[00:02:49] That's a bad idea. So what I would normally do is I would extract this maybe a module and then test that module to make sure that it worked. So, and then after I was assured that that test model worked, then I would bring it into my text. That's not really a super useful exercise so, I'm just gonna copy and paste this, but I'm telling you that this particular thing that we're doing is kind of a bad idea.

[00:03:23]
>> Brian Holt: So.
>> Brian Holt: There we go. So now, it's show count is going to be, is it's going to, and I don't want this .state.search term, I want searchWord.
>> Brian Holt: Yeah. You have to bring this component part right down there, too.
>> Brian Holt: Okay, so some of the stories, we have this show count right here.

[00:04:23] This is gonna be however many shows that it actually finds, right? So the reason why I'm doing this as opposed to just putting the number that I know it's going to be, which is 2, I'm doing this so that if I add stuff or take stuff away from that data.json file, that this test doesn't have to be updated every time that I do that.

[00:04:44]
>> Brian Holt: Okay, so now I can say expect component.find show card.length to equal show count.
>> Brian Holt: So in this particular case, let's step through this line by line to kinda make sure you get what's going on. I have search word, right, so black, right? I'm gonna render out the component, I'm going to take that component.

[00:05:25] I'm going to find the input on there. You might want to put a class on there, something like that. Right now I know there's only going to be one input but this is lazy. This can be any CSS selector, okay? Doubt find input then I'm going to simulate as if the user was typing on it, right?

[00:05:43] Well, I'm going to simulate a change event on that input and I'm going to pass this event as the event for it, right? So this is like simulating a dom event, right, with a target and value, right, because if you look at our search.jsx, what is it reading?

[00:06:00] Event dot target dot value, right? Event dot target dot value. That's what it's actually reading. We're passing in this search word black into that, okay? So now this component's going to kick off that re-render cycle inside of this particular component. And it's going to re-render to that new state, right?

[00:06:26] That new state if we look here, that is going to set this to be black, right?
>> Brian Holt: Coming back to spec, then show count, if we look down here in search. It's basically simulating what's happening here, this filter statement. And then we're seeing does the amount of show cards match how many shows I expected to be there.

[00:06:59] Cool, does that make sense?
>> Brian Holt: So now if we do yarn test,
>> Brian Holt: It's not running the test. You need to say, please actually test this. It passes, just kidding,
>> Brian Holt: Okay?
>> Brian Holt: So expected to receive two. And it cut a whole bunch of stuff. Yeah, no. Right now, we're giving the actual shows.

[00:07:35] What we actually want is the length.
>> Brian Holt: And I guess we could just have some length up here since that's actually what that variable represents. So key is that I just added here we need to .length statement right there. Nope. Down there, .length.
>> Brian Holt: Okay, let's try that again.

[00:08:08]
>> Brian Holt: Expected value to equal 14, and it received two.
>> Brian Holt: That's neat.
>> Speaker 2: Is your show count getting the index rather than the actual shows?
>> Speaker 3: Do you need to do two upper case?
>> Brian Holt: So there's two upper case here and two upper case there.
>> Speaker 3: Over I'm like show title or show descriptions.

[00:08:39]
>> Brian Holt: Show.title and show.description. No, it's doing that collectively here with this to upper case.
>> Speaker 3: I see what you did, right?
>> Brian Holt: So it expected 14. So it's something wrong with this statement right here because two is the correct answer. So my test is actually correct. My test case is not doing it correctly.

[00:09:05] All right preload.show.filter.show title to uppercase index of searchword.
>> Speaker 2: Greater than equal to zero?
>> Brian Holt: And this needs to be. Yeah, that's exactly it. So drop that. Greater than or equal to zero.
>> Brian Holt: Yep, okay. Because this is a filter it still needs to be true or false.

[00:09:35] So it was dropping one shell, which is the zero with element, which is why we're getting 14. Thank you.
>> Brian Holt: So now we get all these tests, right? So this is why I was saying that this is a good way to phrase it cuz there is a check mark that says search renders correctly, right?

[00:09:54] It is doing that.