angularでcypressのunit test

内容

angularでcypressにunit test結果をcode-coverageに追加する方法
注：この投稿のあと、code-coverrageが更新されまして、最新バージョン(2020/4/25現在)には以下は適用できません。最新バージョンはhttps://github.com/bahmutov/cypress-angular-coverage-example を参照してくださいませ

準備と内容の細部

https://github.com/skylock/cypress-angular-coverage-example
に従えば、angular + cypress + code-coverageまでは可能

問題は、cy.visitのe2eのやり方ではなく、直接コードの単体試験を行った結果(importで検証モジュールを持ってきて検証)をcode-coverageにマージする方法が、reactあたりはあるんだが、angularでの可能な方法がなかった。

修正の概要

　ng sでコンパイルしている方は、準備の中でngx-build-plusでistanbule--instrumenter-loaderを追加して、code-coverage用のコンパイルを行っているんだが、*.spec.ts側はcypress/pluginsの中のcy-ts-preprocessor.jsでtypescript変換をしているだけなので、ここに「istanbule--instrumenter-loader」を追加すれば、OKっちゅうことですね。

詳細

改修前のcy-ts-preprocessor.js

cy-ts-preprocessor.js

const wp = require('@cypress/webpack-preprocessor')

const webpackOptions = {
  resolve: {
    extensions: ['.ts', '.js']
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        exclude: [/node_modules/],
        use: [
          {
            loader: 'ts-loader'
          }
        ]
      }
    ]
  }
}

const options = {
  webpackOptions
}

module.exports = wp(options)

追加部分[use]

        use: [
          {
            loader: "istanbul-instrumenter-loader",
            options: { esModules: true },
          },
          {
            loader: 'ts-loader',
          }
        ]

これだけで、e2eのやりきれない部分をimportしたソースで単体試験を追加することが可能！
ああ、しんど！