...
/JavaScript Code Coverage Tools for Web Application Developers
JavaScript Code Coverage Tools for Web Application Developers
Learn how Istanbul and Babel facilitate code coverage measurements and enhance code quality for web applications.
We'll cover the following...
To measure code coverage, we should use tools that can measure the depth of testing done by the testing types during the test execution phase. To do so, we use tools that instrument the website source code by adding different counters and analyzers that in return report back the percentage of lines of code covered by testing and the percentage of statements and branches. With that, we can assess the overall coverage and quality of our product.
For the JavaScript development language, the most used tool is Istanbul, which also uses the Babel plugin. Most leading test automation frameworks have a plugin for Istanbul, making it the most recommended tool for measuring code coverage.
Since in theory, measuring code coverage across all the preceding test automation frameworks is done using Istanbul and the Babel plugin, we will pick Cypress as a reference framework and explain how to set up, instrument, and measure code coverage of a sample web application.
Measuring JavaScript code coverage using Istanbul and Cypress
The Istanbul and Babel plugin installation will not only enable us to measure the code coverage of the application but also allow us to perform the source code instrumentation using the nyc module. The use of the preceding plugins on JavaScript code will transform the source code into code that is measured through counters of functions, statements, branches, and lines of code.
Setting up the configuration files
Another step that is required is to add the following import statement to the cypress/support/e2e.js file:
import '@cypress/code-coverage/support';
After that, we need to register our code-coverage plugin into the Cypress test by adding the following block to cypress.config.js:
module.exports = (on,config) => {require('@cypress/code-coverage/task')(on, config);return config;}