Configuring Code Coverage for TypeScript Files in Jest
Code coverage is an important part of any test setup. One of the jest framework's innovations is built-in test coverage support. In this lesson I demonstrate using the collectCoverageFrom configuration option to improve jest's coverage support for TypeScript files and then demonstrate using npx jest --coverage to run code coverage as well as npm test -- --coverage, which does the same thing.
At the end I briefly mention the collectCoverage flag which seems like you'd want to always just have on, but in practice is annoying. That's because coverage takes several extra to process and I rarely need my code coverage run, so it just makes the testing feedback loop a lot slower. For a build-only config it might make sense to leave on.
There's a pretty good question on stackoverflow that covers using -- with npm test that you might want to check out.
Here's an explanation of how npx differs from npm.
Instructor: In your terminal window, type npm test-- --coverage. You can see in the output here that it tries to calculate your test coverage, but it doesn't know what files to even compare against.
Open up your package.JSON file and in the Jest config, add a new key called collect coverage from. This is going to be an array, and we're going to pass it two strings. The first one is going to be source/**/*.{ts, tsx, js, jsx}.
The second one is going to be not with the exclamation points source/**/*.d.ts. We're telling it to collect coverage from all your typescript JS and JSX files. We're telling it to not read any of your TypeScript definition files. Go ahead and save that.
Back in your command line, when we run our coverage command, we can see that our test continues to pass, and it now calculates test coverage against all the files and the app.
Now, my preferred way to view these coverage reports is using the HTML version, which you can open up in the coverage/lcov-report/index.html file. Here, you can actually see every folder and file in our repo.
As we look into specific files like app.tsx, you can see that absolutely none of it has been tested. Back in the terminal window, I want to teach you a little trick.
We've been running our code coverage with a command npmtest -- space -- coverage. The first set of double dashes you see here tells npm to pass additional arguments to whatever command it's executing as part of that script.
It's passing -- coverage directly to jest. There's another command that comes with npm that does this automatically. It's called npx. If I type npx jest, I can execute jest directly.
If I type npx jest -- coverage, I can run jest with coverage enabled. It definitely saves just a little bit of typing.
The other thing that can help is back in your packaged JSON file, if you want coverage to always run, you can just say collectcoverage:true, and then, if I type npm test or npx jest, it will run coverage every single time.