[Angular, ReactJS] Считаем code сoverage с cypress

Ответить на тему

Автор

Сообщение

news_bot ^®

Стаж: 6 лет 7 месяцев
Сообщений: 27286

news_bot ^® написал(а)
22-Дек-2020 14:32

Цитировать

Привет всем, хочу рассказать как добавить 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-cypressReact Установим все зависимости

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"]
}

Запускаем тесты и смотрим отчетЕще больше можно почитать тут
===========
Источник:
habr.com
===========
Похожие новости:

Теги для поиска: #_angular, #_reactjs, #_cypress, #_code_coverage, #_angular, #_reactjs

Профиль ЛС

Ответить на тему

Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы

Текущее время: 28-Сен 03:17
Часовой пояс: UTC + 5