How it works...

Running the tests is simple; we just have to use the new script:

npm run coverage

All of the suite will be run in the same fashion as in the previous sections of this chapter, but at the end, a text summary will be produced. As earlier, colors will be used: green for well-covered (in terms of testing) source files, yellow for intermediate coverage, and red for low or no coverage:

Running Jest with the coverage option enabled produces the same type of result we saw for Node and React

We can also examine the HTML-produced files, which can be found at /coverage/lcov-report. Open the index.html file there, and you'll get an interactive version of the report, as in the following screenshot:

The produced HTML report is interactive, and lets you see what you missed in your tests

For example, if you wondered why the deviceHandler.component.js file got such a low value (and never mind that you didn't write a test for it; all code should be covered, if possible), you can click on it and see the reason. In our case, the onLayoutHandler code was (logically) never called, thus lowering the coverage for the file:

Clicking on a file shows what lines were executed and which ones (red background) were missed

To see some ways to disable reporting lines that aren't covered, or for cases you don't want to consider, look at https://github.com/gotwarlost/istanbul/blob/master/ignoring-code-for-coverage.md.

Table of Contents for How it works...

Create new playlist

Sign In

Sign Up

Table of Contents for
How it works...