In this short tutorial, IE Grad Developer Christine Schorn shows you how to set up Cypress code coverage using the @cypress/code-coverage plugin in a TypeScript project.
Note: If you are using babel-loader in your project, this tutorial might not be necessary for you. Instead, I recommend you to follow this tutorial. However, if your project is using the ts-loader, stick with me.
To begin with, let’s assume that you already have a project set up with webpack and TypeScript and that you are using Cypress as your front end testing tool. So you are now at a point where you want to generate a nicely formatted code coverage report.
As it turns out, at the point of writing this, it’s a bit trickier to integrate Cypress code-coverage if you are using the ts-loader, so just following the @cypress/code-coverage plugin setup won’t work. Luckily though, with some more steps, we can get it working for our project as well. So let’s start.
First, we have to install some dependencies to get things rolling. Since Cypress code-coverage doesn’t just work with the ts-loader (as mentioned), we have to add the babel-loader and its necessary dependencies to our project.
yarn add -D @babel/core @babel/preset-env @babel/preset-react @babel/preset-typescript babel-loader
Since webpack is managing our loaders and we’re only using the ts-loader at the moment, we’ll have to update our webpack.config.js file and add the babel-loader to our rules as well:
You might be wondering why we’re using two transpilers now. In my case, the project was already set up using the ts-loader, so I choose to just add the babel-loader instead of changing the whole project to only use the babel-loader.
Setting up babel is pretty simple. Babel will help us transpile our TypeScript to the right Javascript standard. So let’s create our .babelrc file if you don’t have one already and add the following snippet:
All we do here, for now, is to tell Babel to use it’s React and TypeScript presets and to transpile to a minimum version of IE 11 and Chrome 58.
yarn add -D @istanbuljs/nyc-config-typescript source-map-support ts-node
Proceed to your package.json file and add the following lines
If you want to save your reports in another folder, you can just change cypress-coverage to the name of your target folder.
I know this is a lot but hang in there. As our next step, let’s install the Cypress code coverage plugin.
yarn add -D @cypress/code-coverage nyc istanbul-lib-coverage
Update your .babelrc file, so it looks like this:
Because the @cypress/code-coverage plugin DOES NOT instrument your code, we have to instrument it ourselves. We are using the Istanbul.js tool for that and since we are now using Babel to transpile our code, we can just add the babel-plugin-istanbul to our .babelrc file and we’re good to go.
Now we’re almost there. Add the following line to your cypress/support/index.js file
import '@cypress/code-coverage/support'
And the following snippet to your cypress/plugins/index.js
As our final step, let’s create a new file cy-ts-preprocessor.js in your cypress/plugins/ folder and paste the following snippet:
Now you should be able to run your tests and get a nicely formatted code-coverage report.
yarn run cypress runopen cypress-coverage/lcov-report/index.html
I hope this helps you to get your Cypress code-coverage going!
Special thanks to all the folks out there who have put out amazing tutorials as well. I would not have been able to write this tutorial without them. If you want to have a further look, check them out below:
