Check out a free preview of the full Complete Intro to React v2 (feat. Router v4 and Redux) course:
The "Testing the Number of ShowCards" Lesson is part of the full, Complete Intro to React v2 (feat. Router v4 and Redux) course featured in this preview video. Here's what you'd learn in this lesson:

Brian writes another unit test which will verify the number of ShowCard components matches the number of shows in the JSON data. After the test is written, Brian demonstrates how to break the test by including a default search term.

Get Unlimited Access Now

Transcript from the "Testing the Number of ShowCards" Lesson

[00:00:00]
>> Brian Holt: So yeah, we are going to write two more quick tests. So, we're gonna import ShowCard. If you really want to, you can just put another snapshot test here for ShowCard. I'm not going to and then we are going to import preload, import preload from '../public/data/json'. I'm gonna move these up.

[00:00:40]
>> Brian Holt: And what I wanna test now is I have 15 TV shows, I just want to make sure that it renders 15 ShowCards for 15 TV shows. So, I'm gonna write a test.
>> Brian Holt: 'Search should render a ShowCard for each show.
>> Brian Holt: And say, const component = shallow(<Search />) and then I'm just gonna write an expect (preload.shows.length).toEqual(component.find(ShowCard).length).

[00:01:46]
>> Speaker 2: The QA person tells me that those should be reversed.
>> Brian Holt: That snapshot shouldn't be first.
>> Speaker 2: The component find ShowCard length should be inside the expect and preload shows length should be what it equals.
>> Brian Holt: Okay.
>> Speaker 2: But that's the QA person in me.
>> Brian Holt: [LAUGH] The developer in me just doesn't give a shit about anything.

[00:02:11] So, [LAUGH] it works on my computer. I buy that.
>> Brian Holt: Lord knows, I am the worst at QA.
>> Brian Holt: So, let's chat about what's going on here. So, we're doing another shallow render of search. By now you've seen what that looks like. We're saying, .find, which more or less works like how you would expect like a jQuery type selector.

[00:02:52] With the additional feature that we can pass it actually a React component says, hey, go out and find all the show card components that you have inside of me and tell me how many you have with that length. It's going to give you an array back of all these components.

[00:03:06] So I said, you should find as many ShowCards as I have shows. That's the basic gist of what this is testing. So if I have 15 shows inside of my preload, then I should have 15 ShowCards.
>> Brian Holt: So if I save that and run it.
>> Brian Holt: Should pass.

[00:03:34]
>> Brian Holt: But a test is only as interesting as how well you can break it, so let's go break it. So if we go into search, what happens if I give it a default searchTerm if I say, house? Well, now it won't render all 15, this can only render 2.

[00:03:51] So, we expect this test to now fail.
>> Brian Holt: So, I expected to get 21 and I received 2.
>> Brian Holt: Yeah, so I guess the QA part of you was right, [LAUGH] cuz you wouldn't expect it to. Yeah, I'm a slum uptake, but you're right. So, does that make sense of why that failed?

[00:04:15] It's kind of an interesting test. That's not necessarily the way you would expect it to break, but that's how it is.