How to set up Cypress code coverage with TypeScript and ts-loader

This post first appeared on the IE Digital Blog

In this short tutorial, I want to show you how you can 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.

Installing babel dependencies

First, we have to install some dependencies that we'll need 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

Setting up webpack

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.

module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'babel-loader',
        exclude: /node_modules/,
      },
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: ['.ts', '.tsx', '.scss', '.js'],
  },

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

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:

{
  "presets": [
    "@babel/react",
    "@babel/typescript",
    [
      "@babel/env",
      {
        "modules": false,
        "targets": {
          "chrome": "58",
          "ie": "11"
        }
      }
    ]
  ]
}

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.

Installing Cypress dependencies

add -D @istanbuljs/nyc-config-typescript source-map-support ts-node

Proceed to your package.json file and add the following lines

"nyc": {
    "extends": "@istanbuljs/nyc-config-typescript",
    "all": true,
    "report-dir": "cypress-coverage"
  }

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:

{
  "plugins": [
    "istanbul"
  ],
  "presets": [
    "@babel/react",
    "@babel/typescript",
    [
      "@babel/env",
      {
        "modules": false,
        "targets": {
          "chrome": "58",
          "ie": "11"
        }
      }
    ]
  ]
}

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:

const cypressTypeScriptPreprocessor = require('./cy-ts-preprocessor')

module.exports = (on, config) => {
  require('@cypress/code-coverage/task')(on, config)
  on('file:preprocessor', cypressTypeScriptPreprocessor);
  return config
}

As our final step, let's create a new file cy-ts-preprocessor.js in your cypress/plugins/ folder and paste the following snippet:

const wp = require('@cypress/webpack-preprocessor')

const webpackOptions = {
  resolve: {
    extensions: ['.ts', '.js']
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        exclude: [/node_modules/],
        use: [
          {
            loader: 'ts-loader'
          }
        ]
      }
    ]
  }
}

const options = {
  webpackOptions
}

module.exports = wp(options)

Now you should be able to run your tests and get a nicely formatted code-coverage report.

yarn run cypress run
open cypress-coverage/lcov-report/index.html

I really hope this helps you all 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

• Max Bause | Setting up a React + TypeScript + SASS + Webpack and Babel project in 6 Steps
• Robert Dale Morris | Code Coverage With Cypress & Angular
• Lluis Agusti | Cypress + Typescript App + Code Coverage
• Gleb Bahmutov | Cypress and Jest
• @cypress/code-coverage
• Official Cypress Docs