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

2021-11-12

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

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

  • Jest
  • react-testing-library
  • Cypress
  • Enzyme

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

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


Jest

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

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

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

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

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

react-testing-library

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

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

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

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

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

Testing Library ってなに?

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

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

@testing-lirary/react とは違うの?

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

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

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

Cypress

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

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

Enzyme

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

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

Storybook

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

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


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

ざくっとまとめると。

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

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

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

  • スナップショットテストはコンポーネントに限らず全モジュールへ対応可能なので、比較的導入が容易な印象
  • 単体、結合テストでは api は繋げない、モックで対応するのが良さそう
  • 単体、結合テストではコンポーネント設計がやはり求められる、Atomic Design との親和性は非常に高く感じる
  • e2e テストの肥大化を押さえるには結合テストが重要そう

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

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

© 2018 kk-web