Reactのテストで使用する以下について、違いを本記事に整理する。
- Jest
- React Test Renderer
- React Testing Library
Jest
Jestは、Facebook社（Meta社）によって開発・メンテされているテストランナー。（自動でテストコードを検出・実行し、正常か異常かを判定するソフトウェア）
主な特徴は以下の通り。
- 単体テスト、結合テスト、E2Eテストなど、様々なタイプのテストをサポートしている
- JavaScript/TypeScript、React、Vue、Angularなど、よくある技術での使用をサポートしている
- 広範囲に渡るテストとアサーションのユーティリティがあり、開発者が機能を簡単にテストするのに役立つ
- 手動設定することなく、導入直後からモック、スナップショットテストをサポートしている
- コードカバレッジとテストスイート機能をサポートしている
- テストを並列実行することで、高い性能を実現している
- 巨大なコミュニティあり
React Test Renderer
React Test Rendererは、DOMやネイティブのモバイル環境に依存することなく、ReactコンポーネントをJavaScriptのオブジェクトとしてレンダーするライブラリ。ReactコンポーネントやReact Nativeのコンポーネントのスナップショットを簡単に取得し、テストに利用することができるようになる。
React Testing Library
React Testing Libraryは、React向けの軽量なテストライブラリ。（テストランナーではない）
主な特徴は以下の通りで、Reactコンポーネントのテスト用に設計されている。
- コンポーネントの実装内容のテストよりも、エンドユーザーがコンポーネントにどう関わるかのテストにフォーカスしている（ユーザー中心のテスト）
- コンポーネントをレンダーする機能のセットを提供しており、UIの見た目の変化のテストすることができる
- Jestとは異なり、Reactエコシステム内でコンポーネントのテストをすることを目的としている
- 内部的に仮想DOMを活用することで、コンポーネントのレンダリングをサポートしている
- クリック、ダブルクリック、タイピング、ホバーなどのイベントを疑似的に発生させるユーティリティを提供している
- React Test RendererはReactコンポーネント（仮想DOM）を扱うのに対し、React Testing Libraryは実際のDOMを扱うという違いがある
参考
React Testing Library vs Jest
An in-depth overview of React Testing Library vs Jest.
medium.com
react-test-renderer's create() vs. @testing-library/react's render()
I'm new to React and confused about all the testing libraries. I got my test code to work but it seems redundant to have...
stackoverflow.com
Testing Library React vs Jest
I have a really big application with react(lot of pages, modals, tables,etc) and I'm using redux-saga for managing the s...
stackoverflow.com
