Couverture de code de lecture avec cyprès

Bonjour à tous, je veux vous dire comment ajouter une couverture de code à un projet angular / react. Sur le net, vous pouvez trouver de nombreuses options pour savoir comment faire cela, et d'après ma propre expérience, je dois noter que parfois avec angular, ce n'est pas si facile. Voyons comment ajouter une couverture de code à la version 11 d'angular (si vous avez 7/8 ... cet exemple peut ne pas fonctionner, meilleure mise à jour)

Angulaire

Installer toutes les dépendances

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Passer du rapporteur au cyprès

ng add @briebug/cypress-schematic
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Créez un fichier 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/
        ]
      }
    ]
  }
};
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Mettons à jour notre angular.jso

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Ajouter à cypress / support / index.js

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Ajouter à 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
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Lançons l'application, la console devrait avoir une variable window .__ coverage__

Après le démarrage de l'application, il ne reste plus qu'à lancer les tests npm run cy: open / cy: run

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Dès que les tests réussissent, un dossier de couverture sera créé à la racine de l'application.

Vous pouvez voir le résultat en ouvrant le fichier coverage / lcov-report / index.html

En cliquant sur les composants, vous pouvez voir quel code a été exécuté et combien de fois, et qui n'a pas encore été couvert par les tests

Le projet lui-même peut être téléchargé ici: https://github.com/NikolayKozub/angular-coverage-cypress

Réagir

Installer toutes les dépendances

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Ajouter à cypress / plugins / index.js

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Ajouter à cypress / support / index.js

import '@cypress/code-coverage/support'
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Ajouter des scripts à package.json

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Ajoutez .babelrc à la racine du projet

{
  "plugins": ["istanbul"]
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Nous effectuons des tests et voyons le rapport

Vous pouvez lire plus ici