🍣

Cypressでコードカバレッジを取るために調べたときのメモ

2022/01/26に公開

背景

jestによる自動テストのカバレッジはとれているがCypressによるものはとれていない。トータルのカバレッジをとりたいがCypressでカバレッジをとるのはjestで取るのに比べて難しそうである。

結論

Cypress自体はカバレッジを取る機能を持っていない。JSはistanbulを用いてカバレッジがとれるようにコードをトランスパイルできる。このコードで自動テストを行うとメモリ上にカバレッジ情報が収集されるので、これを @cypress/code-coverageが取り出し、保存することでカバレッジを計測できる。

参考 https://docs.cypress.io/guides/tooling/code-coverage#E2E-and-unit-code-coverage

もっと詳しく

コードを通ったときに通った箇所をインクリメントすることでカバレッジをとることができる。この変形をするのがistanbulである。

例えば、以下のコードで goro(true)を実行するたびに c.isEventがインクリメントされていく。cが保持するプロパティが0より大きければそのコードブロックはカバーされていることが検知できる。こういったコードを自動生成するのがistanbulの仕事である。

c = { isEven: 0, isOdd: 0};

function goro(isEven) {
   if (isEven) {
     c.isEven++;
   } else {
     c.isOdd++;
   }
}

goro(true);

上記の例に従うと、テストを実行し、cをみるとカバー範囲がわかるが、これをファイルに書き出したりする作業を行うのが、 @cypress/code-coverage`である。
その点を踏まえて、cypressに設定で読み込むコードを読むと、テストの事前事後処理にカバレッジ用の処理を追加していることが何となく読み取れるだろう。

https://github.com/cypress-io/code-coverage/blob/v3.9.12/support.js
https://github.com/cypress-io/code-coverage/blob/v3.9.12/task.js

support.jsはcypressへの処理を追加することに責務をおいており、taskはnycのための処理に責務をおいているように見受けられる。

Discussion