Intermediate React, v4 Test Coverage with Istanbul

Transcript from the "Test Coverage with Istanbul" Lesson

[00:00:00]
>> One last thing that I'm pretty excited to show you, this is one of my favorite parts about jest and actually one of the primary reasons I end up using jest quite a bit. Coming to your package.json we're going to add another script here. I'll do it here, test: coverage and we're gonna say jest -- coverage like that, okay?

[00:00:35] You can cancel this now say npm run test:coverage. So what this does, is it runs jest and it just runs all of your tests normally, but then it generates a report of what things you have covered with your tests. This uses a library called Istanbul which is really common one or sometimes, you might have used something called NYC, which is just a symbol that's been wrapped to make it more useful.

[00:01:06] So you can see here, I ran four tests, seven tests, two snapshots, and this tells me what percentage of statements were covered in there. So for example, carousel.js literally every line of that's covered, you can see here and use pre this I have something that's not being covered.

[00:01:23] Looks like that's an if statement. There you go, I'm missing line 13, no test is hitting that. This used to be incredibly painful to set up, and that's why I like about jest is jest has it built into it out of the box. Let's take this a step further and say, you now have a coverage folder here, so if you say open coverage/lcov-report/index.html.

[00:01:52] This will now open it in your browser and you can actually get a nice report out of this. So imagine if you have a huge test Suite, you can click into one of these and you can see, for example, line 13 here, I have no test that covers this line, right?

[00:02:11] So that could tell me it's like, okay, this actually is a somewhat important line, we probably should cover that with a test right? And so then I can go back and do that. You can also see here that it's not covering this or statement at the moment, so I could consider covering that as well.

[00:02:28] You can also see here these lines are being run once, this line here is being hit six times, you can kind of see the various different levels of coverage here. And you can see here we have results, and that we have 100% test coverage here, that it's a damn live.

[00:02:46] All we're doing here is doing a snapshot test. Basically snapshot in this context just means like, hey, you don't have any syntax errors here, right? But this part of it's really cool that it'll generate this test coverage report for you out of the box for free. I did nothing to set this up it just comes with jest Cool, so we're now code complete for testing, you can grab the testing branch folder out of the complete intro to react V7 project directory.

[00:03:28] Here testing that's one we just did. I got one more thing to show you on testing and then I'll take all the questions you wanna ask. If you're on VS Code, make sure you Install the jest extension. I already have it, this is put out by Orta, Orta was my former co-worker at Microsoft, Orta is very smart, and also knows VS code very well.

[00:03:53] So his jest extension is very cool. There we go. So you can see here now I had this little testing lab beaker thing here, this allows you to do a bunch of really cool things directly from VS code directly in your code. So when I can just look at my tests in general and I can see all of my tests that are passing here.

[00:04:23] For some reason, if I need to run I click play, it requires a bit of ceremony to set up with VS code so you can actually run it directly in the debugger mode. So you can actually step by step directly from VS code. I can see all the tests here, I can run them, if I go into my tests here source tests and I look at like pet.js you can see here it gives you a check mark, this one's currently passing, this one's currently passing.

[00:04:58] You can click on it'll take you over there, you can click up here to run everything again. Again some of this you do have to kind of set it up again which I'm not gonna do at the moment, you can see the testing output, let's just we'd love the windows see what happens So you can see everything, yeah, this one is cool, it'll take you directly to the snapshots, you can see like view snapshot.

[00:05:27] It'll open up here in like a little window, so you can see them side by side but it's getting out of it. Just a lot of really nice helpers for running your tests and, So if you're gonna be using jest in particular, I would highly suggest using that VS code extension.

[00:05:48] Definitely one of my favorite ones. Yeah about coverage, so for just one second, you do need to add to your get ignore here make sure you add coverage. I already had it in there for you but you do not check in the coverage report. And then, I guess, let's just make sure with these tests here, let's just make one fail for some reason So now it read this out here, right?

[00:06:28] I get a nice read here, if I go look in here, it'll tell me exactly what's failing. So it'll tell me exactly which part of the test is failing. Or like what's even more compelling is I have these tests and now let's say I'm working on pet.js. And this is now one dot jpg, I'll save it and then we'll say, hey, that last say that you just did, you get the instant feedback of that, you cause the test to fail.

[00:06:58] That's incredibly compelling, right? The faster you can give feedback to a developer that something is failing, they still have context in their brain of what they were just doing so they'll have to regain context. So there you go. Yeah, if we took some time, you could set it up so you can do all the debugging, that's really nice thing to do as well.

[00:07:23] And then I haven't right now set up to run my tests on every save. Obviously, if you have a big test suite or heavy test suite that can be a little burdensome, but I mean, on my M1 Mac it works really well. So yeah, highly suggest it. So any questions about testing at all?

[00:07:44] We have concluded the testing section. So I showed you unit testing in particular and I did not get into integration testing. And the reason for that is it deserves its own course, right? It's a large subject matter, and one that, I used to do selenium and WebDriver and stuff like that and I got trauma from that so I'm not eager to go back there [LAUGH].

[00:08:10] So suffice to say if you're interested in going further than that into integration testing, there's other great front of masters courses on it. Watch Steve's course on Cypress, that's my plea to you. I think I'll say that if I was gonna write only a few tests I would write a few just damn good integration tests and then do nothing else and I think will be the best for you, right?

[00:08:32] A couple things like, can the user log in?, can the user checkout?, can the user cancel their account? Those kind of critical flows in all of your application, and then call that good. If you're doing that, your users can at least commit essential actions on your application. And make sure you only have a few integration tests.

[00:08:55] Because if you test everything, it becomes unruly to maintain. The integration tests are just hard to maintain cuz there's so much going on, there's so much latency and tools moving around. So it's important to have a few really good ones that you keep super up to date rather than having 50 of them that you kind of half ass, so.