Jestを使って配列が期待通りのものかテストする 💯

すべてはドキュメントに書いてある通りなので、僕がまとめるまでもないのですが、一応ことの顛末をまとめておきます。

jestjs.io

Jestでテストする

Nuxt.jsのプロジェクトのテストにはJestを使ってます。

例えば、

expect(wrapper.vm.width).toBe(1200); // 幅が1200であることを確認

という感じですね。

Jestで配列の包含を確認する

で、配列を確認するときに、

expect(wrapper.vm.widthList).toBe([600, 1200]);

みたいに書いたところ、当然エラーになりました。

これは色々間違っていて、

[600, 1200] === [600, 1200]

的な感じでテストしているイメージなので、当然通りません。

では、どうやってテストするのかなと思って調べてみたのですが、arrayContainingを使うと良いようです。

expect.arrayContaining(array)

expect.arrayContaining(array) は受け取った配列が期待される配列の要素全てを含む場合に一致します。 つまり受け取った配列は期待される配列を 包含 するということです。 したがって受け取る配列が期待される配列に含まれない要素を含んでいても一致します。

https://jestjs.io/docs/ja/expect#expectarraycontainingarray より引用

完全一致ではなく、包含するというのが若干気になりますが、

expect(wrapper.vm.widthList).toEqual(expect.arrayContaining([600, 1200])); // 配列の要素に 600, 1200 が含まれていることを確認

というように使うようです。
なぜか toBe ではエラーになったので、toEqual を使いました。深くは調べてません。

Jestで配列の完全一致を確認する

配列の完全一致を確認するためには、どうすればいいのかなと思ったのですが、よく考えたらforEachを使えば確認できました。
包含の確認の方が面倒なので、メソッドを用意してくれてるんですね。おそらく。

const widthList = [600, 1200];

wrapper.vm.widthList.forEach((width, i) => {
  expect(width).toBe(widthList[i]);
});

こちらからは以上です。