Code coverage in react webapp

Question

I'm a little bit stuck with a task that I have been researching. It's about code coverage in a react webapp.

I implemented a few unit tests using jest + enzyme. also some functional test, using cucumber to get gherkin features and puppeteer for browser automation.

I have able to get the coverage from the code built by webpack and served on my localhost using puppeteer and istanbul through functional tests. Also, I get code coverage from unit test using jest (btw, it include istanbul to do that).

The problem is: I feel those are two diferents metrics, because I test components with jest + enzyme file by file, and in the other hand, I have code coverage from puppeteer that actually is a single built js file.

The goal should be get code coverage from unit tests and functional tests.

So, my questions are:

• has sense, mesure the code coverage on unit tests and functional tests?

• has sense, merge code coverage from unit tests and functional tests? and if has sense how to do that?

• what is the best aproach to get code coverage from a webapp?

Answer 1

has sense, mesure the code coverage on unit tests and functional tests?

If you want to get 100% coverage it probably makes sense to measure a combination of unit, integration and functional end2end tests. Because some parts of integration are hard to test without a deployed version.

I do like to advocate for the least amount functional end2end tests possible. Just one or two per feature, because they are slowish, fragile, have a high maintenance cost. Now the added coverage will be so light that it might not be worth your time to combine coverage reports for just some extra lines. Personally I know which lines are covered by the end2end tests.

I have code coverage from puppeteer that actually is a single built js file

For code coverage purposes you could deploy a version that does not use a single built js-file.

has sense, merge code coverage from unit tests and functional tests? and if has sense how to do that?

If you can get source mapping to work you should be able to merge coverage even for front-end code that has been webpacked into a single file. But this is not documented well and might even need extra custom code to work well.

what is the best aproach to get code coverage from a webapp?

This is too broad, but front-end code is similar to back-end code if you setup a testable architecture. Adding tests and coverage in a later stage will be harder, maybe use TDD ;-)