Check out a free preview of the full Complete Intro to React, v9 course
The "Code Coverage Reporting" Lesson is part of the full, Complete Intro to React, v9 course featured in this preview video. Here's what you'd learn in this lesson:
Brian generates a code coverage report, which details how much code in the application is tested. Achieving 100% code coverage is often unrealistic, but coverage reports are helpful for identifying critical areas in an application that may be untested.
Transcript from the "Code Coverage Reporting" Lesson
[00:00:00]
>> Brian Holt: Let's do coverage. We were just talking about 100% test coverage. I'm going to show you how to measure that with vTest now. We are gonna install one more thing, NPM install D at VTest slash coverage dash v8 2.1.3.
>> Brian Holt: Okay.
>> Brian Holt: I showed you how to do this, I'm gonna show you how to do with V8.
[00:00:28]
I think it's the better library, but if you are bent on using Istanbul.
>> Brian Holt: You can do that as, well and that will get the Istanbul one as well. If it doesn't make any difference to you, just to stick with VA Istanbul has, like the been the gold standard for longer than my career, right?
[00:00:45]
It's been the test coverage tool forever, but V8 is the new hotness. All right, so I want you to go to your V config really quick and.` And inside of, I think it just says coverage. So we're gonna do coverage here. Is it inside of test, I can't tell.
[00:01:10]
Yeah, it's inside of test. My notes didn't say that. But coverage, and then we're gonna do a reporter, and I just have in here text. I think I have all of them, but you can choose just some of them. JSON and HTML and this will generate all of the tests for your coverage tools.
[00:01:36]
You probably don't need all of them, we'll look at the HTML one, but the JSON one can be ingested into your dashboards or something like that, if you want to do that. Okay, that's really it, which is kind of cool to set this up. The only thing we got to go do now is in our package.json, instead of our scripts, we're gonna create one called coverage.
[00:01:59]
So, I'll just put this down at the bottom, coverage, and all you're gonna do is vtest-- coverage, and it will handle the rest. If you've never had to set up coverage by hand in like, I don't, like eight years ago. I just want you to know that this used to suck [LAUGH] a lot, to instrument everything correctly, to run test coverage.
[00:02:24]
And the fact that VTest just does it for you is just great.
>> Brian Holt: MPM, run, test: or no, I call the coverage. MPM run Coverage, like that. It's gonna run our entire testing suite, and then we get this really cool report here in our command line, of what files are covered, what files aren't covered.
[00:02:50]
And this is cool that we get this directly into our CLI, but we can actually do something that's even cooler. I'm gonna go to my browser and I'm gonna do Command open, and I'm gonna be in Padre Genos here, you get this coverage directory, and just open this index.HTML inside of the coverage directory.
[00:03:15]
Now, we get a full on web page that's just Scribes all of the test coverage. When I say coverage, I'm just saying what files are tested and what files are not, and what lines are tested and what lines are not. So let's look at our source directory, we can see that pizza.jsx, every line was covered.
[00:03:32]
You can see some of them got run twice, some of them got run once. Cool, let's go look at cart. You can see that all of these lines were run once, but you can see it actually never got here. Why is that? Well, we gave it an empty cart.
[00:03:51]
We never gave it a full cart, right? So this for loop never gets run. This cart.map never gets run because it never had anything in the cart. Or use pizza the day, right? Some of these got run twice, this got run four times. That's kind of cool, right?
[00:04:08]
And you can see, for example, header never tested. Same with sources like post contact, looks like this got run, but we never hit the error case, right? So we don't know if it actually does the correct error.
>> Brian Holt: So you can see here we have 16% of statements under 17%, 45% of branches, 33% of functions.
[00:04:29]
Obviously, this is not a well tested code base, right? I'm not purporting that it is. But I'm also gonna say that I don't I think 100% test coverage is a worthy goal. I think it's a waste of time. Most of the time you end up writing tests that you don't care about.
[00:04:42]
And tests that you don't care about are worse than tests that don't exist. It's pretty cool stuff, though, right? This all just gets generated automatically. I think it's cool.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops