TL;DR

cypressとnyc, CircleCI, codecovでの環境構築を行うステップと、CircleCIのconfig.ymlの共有と解説を行います。これでe2eテストをCIで実行し、テストカバレッジをプルリク上で確認できより高品質なコードを保てるようになるかと思います。

前提

すでにCypressをインストール、またはcypress、ncy、CircleCI、codecovとは何かについて知識のある方を前提としています。

Cypressでカバレッジ設定

Cypressにてカバレッジを吐き出すように公式サイトを参考に設定を行います。

１．必要なパッケージのインストール

yarn add -D babel-plugin-istanbul @cypress/code-coverage nyc istanbul-lib-coverage

２．.babelrc の編集

.babelrc の plugin に istanbul を追加します。

{
  "presets": ["@babel/preset-react"],
  "plugins": ["transform-class-properties", "istanbul"]
}

３．cypress/support/index.js の編集

cypress/support/index.js に import '@cypress/code-coverage/support' を追加します

// cypress/support/index.js
import '@cypress/code-coverage/support'

４．cypress/plugins/index.js の編集

on('task', require('@cypress/code-coverage/task')) を cypress/plugins/index.js の modue.exports 内に追加します。

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

これで coverageが /coverage に吐かれるようになったかと思います。

CircleCI + codecov設定

circleci/config.yml に下記ファイルを設定します。

config.yml

version: 2.1
orbs:
  cypress: cypress-io/cypress@1
jobs:
  codecov:
    executor: cypress/base-10
    steps:
      - attach_workspace:
          at: ~/
      - run: yarn install
      - run: yarn codecov
workflows:
  build:
    jobs:
      - cypress/run:
          yarn: true
          start: yarn next
          wait-on: 'http://localhost:3000'
          post-steps:
            - store_artifacts:
                path: coverage/
      - codecov:
          requires:
            - cypress/run

解説

まずcypressを動かすために orbs で提供されている cypress-io/cypress@1 を使用します。

version: 2.1
orbs:
  cypress: cypress-io/cypress@1

また cypress-io/cypress にある cypress/run job を設定します。

      - cypress/run:
          yarn: true
          start: yarn next
          wait-on: 'http://localhost:3000'
          post-steps:
            - store_artifacts:
                path: coverage/

yarn: true : yarnを使用しているため、npmであれば不要
start : cypress runが事項される前に localhost:3000 へとアクセスできるようにするため yarn next を指定。(next 以外ではここを変更する)
wait-on : 上記のコマンドで localhost:3000 へアクセスできるまで待機
post-steps : テスト実行後のステップを記入
store_artifacts : cypressにて吐き出されたreportを他jobで共有できるようにartifactを登録

そして上記ステップ完了後にcodecovにreportを送信します。もしcodecovへ登録が行われていない場合は公式サイトを参考に対応を行ってください。

codecovのjobを登録

jobs:
  codecov:
    executor: cypress/base-10
    steps:
      - attach_workspace:
          at: ~/
      - run: yarn install
      - run: yarn codecov

(yarn installしていますが、orbsでキャッシュしたものを使用したほうが良いかもしれません)

- run: yarn codecov でcodecovに orbs にて作成したレポートを送信しています。

これで cypress + nyc + next.js + CircleCI + codecov での環境構築は完了です。

まとめ

意外と cypress + nyc + next.js + CircleCI + codecov での環境について情報がまとまっていなかったのでブログに書きました。 codecovはテストコードをチームで書く上でかなり便利なサービスかと思います。ぜひこの機会に高品質なコードを保守できる環境を整えてみてはいかがでしょうか。