⤴️ 🧖🏼 ✉️ ヒノキでコードカバレッジを読む 🌅 🐿️ 🙏🏾

みなさん、こんにちは。Angular/ Reactプロジェクトにコードカバレッジを追加する方法を説明したいと思います。ネット上では、これを行う方法についてかなりの数のオプションを見つけることができます。私の経験から、角度のあるものではそれほど簡単ではない場合があることに注意する必要があります。角度のバージョン11にコードカバレッジを追加する方法を見てみましょう（7/8がある場合...この例は機能しない可能性があります、より良い更新）

角度

すべての依存関係をインストールします

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

プロトラクターからヒノキへの移行

ng add @briebug/cypress-schematic

ヒノキ/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"
  }
},

サイプレス/サポート/index.jsに追加

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

サイプレス/プラグイン/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
}

アプリケーションを実行してみましょう。コンソールにはウィンドウが必要です。__coverage__変数

アプリケーションを起動した後、残っているのはテストを実行することだけですnpm run cy：open / cy：run

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

テストに合格するとすぐに、アプリケーションのルートにカバレッジフォルダが作成されます。

ファイルcoverage / lcov-report /index.htmlを開くと結果を確認できます

コンポーネントをクリックすると、実行されたコードと実行された回数、およびまだテストでカバーされていないコードを確認できます。

プロジェクト自体はここからダウンロードできます：https：//github.com/NikolayKozub/angular-coverage-cypress

反応する

すべての依存関係をインストールします

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

サイプレス/プラグイン/index.jsに追加

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

サイプレス/サポート/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"]
}

テストを実行してレポートを確認します

あなたはここでもっと読むことができます

ヒノキでコードカバレッジを読む

角度

反応する

More articles: