How to check code coverage by highlighting lines react app using visual studio code

Question

Is there any way to highlight all lines which has code coverage for react app. I am using Jest. my editor is visual studio code.

Answer 1

You can use the vscode-jest plugin, it has codeLens (enabled by default).

Beware though, it's a little slow sometimes (on the first run especially). I disable 'run all on first load' option, to avoid that. The code coverage shown might be a little off sometimes due to these perf issues. But it works good enough for me most times. At the top of the file, it even shows the % of branches and line covered.

See related issue: https://github.com/jest-community/vscode-jest/issues/181

Answer 2

Id recommend using Coverage Gutters.

Have yet to run into any issues with it. Even better it's framework agnostic, handy if you're not just a JS dev.