Reactのテストについてしっかり調べてみた

2021-11-12

今までフロントエンドのテストから逃げっぱなしだった自分ですが、ちょっと本腰を入れて調べてみました。

まずは frontend roadmap に沿ってみていくと、以下のパッケージが挙げられています。

「You can fill all your testing needs with just these.（これらだけですべてのテストニーズを満たすことができます）」と書かれているので、これ以外のパッケージについては気にしなくて良いのでしょう。

で、ここに Storybook をあわせた 5 種類を基本に色々と調べてきました。

Jest

名前だけはよく聞く Jest ですが、テストランナーと思って問題ないようです。

React でユニットテスト（つまり単体テスト）を書くとなると、スナップショットテストのイメージが強いと思いますが。

Jest を用いてスナップショットテストを行う場合、react-test-renderer というパッケージを追加することで可能となります。

またスナップショットテストはリグレッションテスト（回帰テスト）となります。

そのためコードの修正を行った場合に、修正による影響と影響範囲が想定通りであるか確認が容易になります。

コンポーネント単位でイベントの発火など、DOM に関するテストを行う場合 React Testing Library が良いみたいです。

基本は Jest の上に乗せてテストすることになります。

ちなみに react-test-renderer の後発が react-testing-library と書かれている記事を見かけましたが、それは全くのデマです。

react-test-renderer はスナップショットテスト、react-testing-library は DOM をテストするためのパッケージであるため、そもそも目的が全く異なります。

インテグレーションテスト（つまり結合テスト）にあたるらしいのですが、現段階ではピンとこず…。

Vue.js 用の Vue Testing Library など、各種フレームワークなどに提供されている Testing Library の総称です。

Testing Library の中に React Testing Library が含まれている、ってことですね。

一緒です、ここが 1 番ややこしい。

正しくは React Testing Library のパッケージ名が @testing-lirary/react になります。

react-testing-library というのは @testing-lirary/react の前に使用されていたパッケージ名です、ほんとややこしい。

言わずもがな、e2e テスト用のパッケージです。

ブラウザを通して実際の動作テストを実現してくれます。

react-testing-library と似たような目的のパッケージらしいです。

基本的は react-testing-library を書いたほうがメリットが大きいみたいですが、ここらへんはもう少し調べて見る必要がありそうです…。

コンポーネント単位でコンポーネントの見た目を Web 上に出力してくれるすごいやつです。

実際にはテストでもなんでもないですが、スナップショットテストを組み合わせることができるらしいです。

めっちゃややこしいですね、ここらへん理解できていないエンジニアは決して少なくなさそうです。

ざくっとまとめると。

単体テスト（ユニットテスト）：Jest × react-test-renderer（スナップショットテスト・リグレッションテスト（回帰テスト））・Storybook
結合テスト（インテグレーションテスト）：Jest × react-testing-library・Storybook
総合テスト：Cypress

みたいな選定で良さそうです、多分。

で、色々調べてみて個人的に感じたこととしては以下のとおりです。

とはいえ、すべてのプロジェクトにテストが必要かと言われるとやっぱりそんなことはないと思います。

ケースバイケースで、必要なテストを必要なケースで導入すべきだと思いますし、テストよりなによりコンポーネント設計がきちんと行われていないと組んでも効果は薄いのかなーと。