Привет всем, хочу рассказать как добавить code coverage к angular/react проекту. В сети можно отыскать довольно много вариантов как это делать, и со своего опыта должен заметить что иногда с angular это не так просто. Рассмотрим как добавить code coverage к 11 версии angular (если у вас 7/8 этот пример может не работать, лучше обновится)
Angular
Установим всезависимости
npm i -D ngx-build-plusnpm i -D istanbul-instrumenter-loadernpm 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 nycbabel-plugin-istanbulistanbul-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"]}
