Membaca cakupan kode dengan cemara

Halo semuanya, saya ingin memberi tahu Anda cara menambahkan cakupan kode ke proyek sudut / reaksi. Di internet Anda dapat menemukan beberapa opsi untuk melakukan ini, dan dari pengalaman saya sendiri, saya harus mencatat bahwa terkadang dengan sudut tidak begitu mudah. Mari kita lihat cara menambahkan cakupan kode ke versi 11 dari sudut (jika Anda memiliki 7/8 ... contoh ini mungkin tidak berfungsi, perbarui lebih baik)

Angular

Instal semua dependensi

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Pindah dari busur derajat ke cemara

ng add @briebug/cypress-schematic
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Buat file 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/
        ]
      }
    ]
  }
};
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Mari perbarui angular.jso kita

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Tambahkan ke cypress / support / index.js

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Tambahkan ke 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
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Mari jalankan aplikasi, konsol harus memiliki variabel window .__ coverage__

Setelah memulai aplikasi, yang tersisa hanyalah menjalankan tes npm run cy: open / cy: run

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Segera setelah tes berhasil, folder cakupan akan dibuat di root aplikasi.

Anda bisa melihat hasilnya dengan membuka file coverage / lcov-report / index.html

Dengan mengklik komponen, Anda dapat melihat kode mana yang telah dijalankan dan berapa kali, dan mana yang belum tercakup oleh tes

Proyek itu sendiri dapat diunduh di sini: https://github.com/NikolayKozub/angular-coverage-cypress

Reaksi

Instal semua dependensi

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Tambahkan ke cypress / plugins / index.js

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Tambahkan ke cypress / support / index.js

import '@cypress/code-coverage/support'
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Tambahkan skrip ke package.json

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Tambahkan .babelrc ke root proyek

{
  "plugins": ["istanbul"]
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Kami menjalankan tes dan melihat laporannya

Anda dapat membaca lebih lanjut di sini