This course has been updated! We now recommend you take the Complete Intro to React, v8 course.

Check out a free preview of the full Complete Intro to React, v2 (feat. Router v4 and Redux) course:
The "Test Coverage with Istanbul" 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 wraps up the section on testing React applications with a demonstration of test coverage. He’s using the Istanbul which creates a code coverage report indicating how much of the source code is covered by a test. Brian also show the lcov-reports which better visualize the coverage and provide some interactivity.

Get Unlimited Access Now

Transcript from the "Test Coverage with Istanbul" Lesson

>> Brian Holt: We're gonna talk about coverage real quick, code coverage, which is stupid easy because actually already built into Jest. So all we're gonna do is say npm run test -- --coverage. Like that.
>> Brian Holt: Run that, it's gonna run our test again. But it's gonna give us a code coverage report via Istanbul, which is the one that everyone uses for JavaScript.

[00:00:33] And it's going to give us this nice little graph here that says hey, you tested every line in Search, so you can be like, every line in Search.js got covered by a test. And we also covered 50% of statements in ShowCard just by pulling it in, right, which is also kind of interesting.

[00:00:52] It tells you the lines that you missed. But we got 100% of branching, 100% of functions, which is just really interesting. And then what's cool about it is all this is for free. We wrote nothing to get this. This is just already build into Jest. What's even cooler about this is you can say, open this.

>> Brian Holt: Coverage, and then there's that lcov-report/index.html.
>> Brian Holt: So this'll open in your browser. Just notice that I opened like in the files. So you can just do like a command open here, and find it as well. But it's the lcov-report, and then the index.html in there.
>> Speaker 2: That open by the way is only OSX.

>> Brian Holt: Yeah, I think it only is OSX. Sorry. [LAUGH] But just open in your browser, right, that's the sum of the story here. So we can actually look and get like this nice report. You can see this got ran 65 times. This got ran 84 times. This got run once, right?

[00:02:02] We can go back to the ShowCard and we can see this was run once, this was run once, but you can notice here that render was never run, right? So we actually never rendered a ShowCard but everything else we can guarantee is at least syntactically correct, right? And that it doesn't have any runtime errors.

>> Brian Holt: But I think it's cool, it shows you these two statements didn't get run. And that's all stuff just built into Istanbul for free.
>> Brian Holt: So we're gonna quickly just put a line here in package.json just for coverage. So we're gonna say "cover": "npm" run test.
>> Brian Holt: -- --coverage.

>> Brian Holt: Right, that's what it was?
>> Brian Holt: Yep, so now we can do npn run cover anytime you want to know what that is.
>> Brian Holt: And-
>> Speaker 3: Can we see that again?
>> Brian Holt: See this? Okay, so my last little note before I let you go for the day, we kind of addressed a little bit earlier is hot module reload.

[00:03:24] I talked about how that works, that it just lets you kind of plug in pieces. We're not gonna work on it in this workshop just because we're in-between major versions and the new one's not fully baked, the old one doesn't work super well. Doesn't work super well, but that's not how I want to qualify it.

[00:03:43] But it wouldn't work well with this app. So we're not gonna cover it today. But it is a cool technology, one that you should investigate and definitely look out when the new version comes out. And I'll definitely keep on the version 2 repo a note on how to do it once the new version comes out.

[00:04:03] But that will do us for today. Is there any questions that you all wanna talk about before we leave?
>> Speaker 3: In the npm scripts we have like a dash dash kind of between commands. So like the last one has npm run test dash dash, space dash, is that kind of like the same as just doing an ampersand ampersand?

>> Brian Holt: No, so what this does is it says, I want you to do whatever is in test, right? So it's gonna run this statement right here. And then I want you to pass whatever's after this directly to that, right? So this would be the same as doing --coverage, right?

[00:04:43] So it just appends that to the end.
>> Brian Holt: Good question.