Create React App で test coverage が出力されない時の対処

はじめに

Create React Appで作成したプロジェクトの test coverage がうまく表示されない際の対処法についてメモ。

対象となるバージョンは react-scripts@3.0.0 で、公式ドキュメントに記載されているコマンド npm test -- --coverage を利用し、test covarageを表示しようとしたところ出力された結果が以下のような空の状態になってしまい、うまく出力されませんでした。

----------|----------|----------|----------|----------|-------------------|
File      |  % Stmts | % Branch |  % Funcs |  % Lines | Uncovered Line #s |
----------|----------|----------|----------|----------|-------------------|
All files |        0 |        0 |        0 |        0 |                   |
----------|----------|----------|----------|----------|-------------------|

こちらの github の issue がドンピシャで解決してくれたので、その方法についてシェアします。

対処方法

以下のコマンドで対処可能です。

npm test -- --coverage --watchAll=false

yarnの場合は同様に以下のようになります。

yarn test --coverage --watchAll=false

オプションで --watchAll=false を追加し、 watch モードを取り除いてあげると正しく test coverage が表示されます。

react-scripts testはデフォルトで watch モードで Jest を実行するので、watch モードを取り除くためには --watchAll=falseを明示的に指定する必要があります。

参考

Create React App ドキュメント
github issue (test coverage is empty - v3.0.0 #6888)