- [Speaker] As stated in the previous section,
Jest comes bundled with tools
for analyzing test coverage.
Test coverage reports give visibility into how much
of our code base is covered by our test cases.
So let's see how we can use the test coverage tool in Jest
to visualize how much of our code is currently
covered by tests.
To follow along with this video,
you need the 02_07b branch of the project.
So make sure you are on the 02_07b branch.
Adding test coverage in Jest is pretty straightforward,
go into the package.json file and simply add
the --coverage flag to the Jest command
in the test clip content in the package.json file.
With this added, a test coverage report will be generated
anytime we run the test script.
Let's go ahead and test this out on the command line,
but first save the file.
To generate a test report, simply run the test command
to run all the tests in the application.
All our tests are currently passing,
but can you spot the table below the tests?
This table indicates that only the utilities module
is covered by tests.
This is quite obvious as the utility module
is the only module being used in all our tests.
This means that every other module in the project
is currently not being tested.
The table also shows that all the functions
in the utilities module are currently being tested.
This is indicated by the hundred percent score
under the functions column.
One side effect of running code coverage is that the tool
also generates an HTML test report.
This page gives us a more detailed and interactive report.
Look at the coverage folder now present within the project.
This is an auto-generated folder for the test report.
The report file is an index.HTML file
inside the lcov-report folder.
The report file can be opened in the browser
by running the open command to target the report's file.
You can also open the file manually by double-clicking
on the file.
The test coverage report in the browser
is more user-friendly and uses colors
to improve the experience.
The modules being tested are listed
with your test coverage results.
You can click on a module to view the parts
that are being tested and the parts not tested.
Currently, our utilities module is fully tested.
Let's introduce a dummy module into the project
and just include it in any of our test file,
but not test any part of it.
Create a new testModule.js file inside the source folder.
Inside this module add a simple function
that prints a string and export it from the module.
Now open the async.js test file
and import the print something function
from the dummy module.
With the new module in place and imported into one
of our test files, let's now generate
an updated test coverage by running the test script
once again.
When the test is complete, open the coverage file
once again in the browser.
This time we see two files and the report indicating
that no function in our dummy module is being tested.
Click on the test module to have a more detailed view.
Here we see the print something function
and the statement in it, colored red.
This indicates that they are currently not being covered
in our project tests.
Manually searching true code to find what to test
or guessing how much our code has been tested
is counterproductive and inaccurate.
Test coverage helps us avoid these assumptions
by giving us factual data about the state of our tests.