Hola a todos, quiero decirles cómo agregar cobertura de código a un proyecto angular / react. En la red puede encontrar bastantes opciones sobre cómo hacer esto, y por mi propia experiencia debo señalar que a veces con angular no es tan fácil. Veamos cómo agregar cobertura de código a la versión 11 de angular (si tiene 7/8 ... este ejemplo puede no funcionar, mejor actualice)
Angular
Instalar todas las dependencias
npm i -D ngx-build-plus
npm i -D istanbul-instrumenter-loader
npm install -D @cypress/code-coverage
Pasando del transportador al ciprés
ng add @briebug/cypress-schematic
Cree un archivo ciprés / cobertura.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/
]
}
]
}
};
Actualicemos nuestro angular.jso
"serve": {
"builder": "ngx-build-plus:dev-server",
"options": {
"browserTarget": "angular-registration-login-example:build",
"extraWebpackConfig": "./cypress/coverage.webpack.js"
}
},
Agregar a cypress / support / index.js
import '@cypress/code-coverage/support';
Agregar a 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
}
Ejecutemos la aplicación, la consola debería tener una ventana .__ cobertura__ variable
Después de iniciar la aplicación, todo lo que queda es ejecutar las pruebas npm run cy: open / cy: run
"cy:open": "cypress open",
"cy:run": "cypress run",
Tan pronto como pasen las pruebas, se creará una carpeta de cobertura en la raíz de la aplicación.
Puede ver el resultado abriendo el archivo cobertura / lcov-report / index.html
Al hacer clic en los componentes, puede ver qué código se ha ejecutado y cuántas veces, y cuál aún no ha sido cubierto por las pruebas.
El proyecto en sí se puede descargar aquí: https://github.com/NikolayKozub/angular-coverage-cypress
Reaccionar
Instalar todas las dependencias
npm i -D nyc
babel-plugin-istanbul
istanbul-lib-coverage
@cypress/code-coverage
@cypress/instrument-cra
Agregar a cypress / plugins / index.js
module.exports = (on, config) => {
require('@cypress/code-coverage/task')(on, config)
return config
}
Agregar a cypress / support / index.js
import '@cypress/code-coverage/support'
Agregue scripts a package.json
"start": "react-scripts start",
"start:coverage": "react-scripts -r @cypress/instrument-cra start",
Agregue .babelrc a la raíz del proyecto
{
"plugins": ["istanbul"]
}
Realizamos pruebas y vemos el informe