This course has been updated! We now recommend you take the Intermediate React, v5 course.

Check out a free preview of the full Intermediate React, v3 course:
The "Istanbul" Lesson is part of the full, Intermediate React, v3 course featured in this preview video. Here's what you'd learn in this lesson:

Brian walks through setting up Istanbul to check the test coverage of application files via an interactive viewer. Istanbul also creates an in depth report of the test coverage for what specifically is not being covered by your current tests.

Get Unlimited Access Now

Transcript from the "Istanbul" Lesson

>> So one more very, very cool feature about Jest, there's a tool called Istanbul. It's one of my favorite testing tools, because you get a lot of functionality and you have to do literally nothing to get it. This actually used to be kind of annoying to set up.

[00:00:14] Once you set it up, it was fine. In fact, one of my earlier courses, I show you how to set it up. And it requires a Babel transformation and hooking into the test suite. Now we have Jest, Jest just does it for you out of the box. So go to your package.json.

[00:00:33] And one more thing here for me. And we want jest -coverage is the name of it and test:coverage. Quit your watcher here and then I want you to run npm run test:coverage. So this is gonna run your tests, but then it's gonna give you a report afterwards. It's like how much test coverage you have.

[00:01:01] So you can see here use BreedList. We don't have all the branching logic, we're actually missing a line here it looks like. But let's say carousel.js, we have 100% test coverage. Every single line in there is actually being executed at least once. And actually you can even get deeper in this, I can say open coverage/LCOV-report index.html.

[00:01:22] And this will actually open an HTML file where I can actually see an in depth report of what my test coverage looks like. So if I wanna see hey, what line of useBreedList did I miss? So if I click on this, I can see. I'm not checking at all, is it reading from the cache correctly?

[00:01:44] Caching might as well be like French for bug in my opinion, right? So this is actually probably something that we should go in and check, right? So this is actually gonna let you know, are you missing something important or is it fine the way it is, right? So I don't know, big fan of this, it's really cool.

[00:02:03] Don't check in these files you can always generate them whenever you want to. But this is what Istanbul does for you and it's just built into Jest for us automatically. So you can see there of just the test that you and I wrote on these four files we've got 33 out of 34 lines of code covered, 100% functions, and 12 out of 14 code branches.

[00:02:25] Now this is what some people want. They want to get 100% on this number, and I say 97 might even be too high in my opinion. [LAUGH] But you can see here we're not covering all of our JS files, right? So it won't tell you that, it won't tell you what your what whole files you're not covering.

[00:02:42] Nonetheless, free information, really cool to look at. I'm a big fan.