Считаем code сoverage с cypress

Привет всем, хочу рассказать как добавить code coverage к angular/react проекту. В сети можно отыскать довольно много вариантов как это делать, и со своего опыта должен заметить что иногда с angular это не так просто. Рассмотрим как добавить code coverage к 11 версии angular (если у вас 7/8 … этот пример может не работать, лучше обновится)

Angular

Установим все зависимости

npm i -D ngx-build-plus
npm i -D istanbul-instrumenter-loader
npm install -D @cypress/code-coverage

Переедем с protractor на cypress

ng add @briebug/cypress-schematic

Создадим файл cypress/coverage.webpack.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.(js|ts)$/,
        loader: 'istanbul-instrumenter-loader',
        options: { esModules: true },
        enforce: 'post',
        include: require('path').join(__dirname, '..', 'src'),
        exclude: [
          /\.(e2e|spec)\.ts$/,
          /node_modules/,
          /(ngfactory|ngstyle)\.js/
        ]
      }
    ]
  }
};

Обновим наш angular.jso

"serve": {
  "builder": "ngx-build-plus:dev-server",
  "options": {
    "browserTarget": "angular-registration-login-example:build",
    "extraWebpackConfig": "./cypress/coverage.webpack.js"
  }
},

Добавим к cypress/support/index.js

import '@cypress/code-coverage/support';

Добавим к cypress/plugins/index.js

module.exports = (on, config) => {
  require('@cypress/code-coverage/task')(on, config)
  // IMPORTANT to return the config object
  // with the any changed environment variables
  return config
}

Запустим приложение, в console должна быть переменная window.__coverage__

После запуска приложения остается только запустить тесты npm run cy:open / cy:run

"cy:open": "cypress open",
"cy:run": "cypress run",

Как только тесты пройдут в корне приложения будет создана папка coverage

Посмотреть результат можно открыв файл coverage/lcov-report/index.html

Кликая по компонентам можно посмотреть какой код выполнялся и сколько раз, а какой еще не покрыт тестами

Сам проект можно скачать тут: https://github.com/NikolayKozub/angular-coverage-cypress

React

Установим все зависимости

npm i -D nyc
babel-plugin-istanbul
istanbul-lib-coverage
@cypress/code-coverage
@cypress/instrument-cra

Добавим к cypress/plugins/index.js

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

Добавим к cypress/support/index.js

import '@cypress/code-coverage/support'

Добавим скрипты к package.json

"start": "react-scripts start",
"start:coverage": "react-scripts -r @cypress/instrument-cra start",

Добавим .babelrc в корень проекта

{
  "plugins": ["istanbul"]
}

Запускаем тесты и смотрим отчет

Еще больше можно почитать тут