coverage
reactjs
React

react-scriptsでカバレッジを取る際に気をつけるべきこと

Reactに慣れ親しむため、create-react-appを用いてチャットアプリを作っています。
create-react-appを使うと開発に必要なツール群や設定(webpackなど)が整った状態のコードが生成されるので、
コーディングだけに集中できます。
継続的インテグレーション(CI)のツールとしてCircleCIを使っているのですが、
最近CircleCIのビルド結果を眺めていたところ、奇妙な現象に気づきました...

これまでのコミットがすべてPASSEDになっている!
そんな訳はない!masterに作業途中のコミットでテストに失敗するはずのコミットを何回かしてきたはず! 1

もともとCircleCIの設定ファイルを以下のように書いていました。

  1. 必要なパッケージをインストール
  2. テストを走らせて、カバレッジをcoverageディレクトリに出力
  3. codecovに2の出力をアップロード
.circle/config.yml
(略)
steps:
  (略)
  - run: yarn install
  (略)        
  - run:
      name: Run test
      command: yarn test --coverage
  - run:
      name: Upload coverage to codecov
      command: bash <(curl -s https://codecov.io/bash) -t $CODECOV_TOKEN

なにがおかしいかお分かりでしょうか。実はyarn test --coverageはテストが失敗しても最後までテストをし続けてしまうのです...
そのため、CircleCIにはテストが失敗したと認識されず、壊れたmasterもPASSEDとなってしまっていたのです。
これを解決するために、--bailオプションをつけて、テストが初めて失敗した時点でテストを終了するようにします。
なので、yarn test --coverageyarn test --coverage --bailとすればよいです。

なんでもっと早く気づかなかったんだって感じですTAT


  1. masterは一般的に動くコードを置くため、テストに失敗するような作業途中ソースコードをコミットするのは推奨されません。今回は個人の趣味で開発しているので、よしとしてください m(_ _)m