Test-Driven React, Second Edition

TL;DR

• React とテスト駆動開発（TDD）を組み合わせてアプリケーションを開発する本である。
• React プロジェクトの要件をテストに変換し、テスト・リンター・型チェックを開発環境に組み込むことで、コンポーネントを素早く安心して作り直せるようにする。

対象読者

React プロジェクトで TDD を実践したい開発者向けの本である。出版社のページによると、JavaScript か TypeScript の実用的な知識が前提になる。

書籍内では次のライブラリやツールを使う。

• React / TypeScript
• Vitest / Testing Library: 素早く理解しやすいテストを書く
• ESLint / Prettier: コードを整える
• styled-components: テストしやすい方法でコンポーネントにスタイルを当てる
• Storybook: ドキュメントを作り、GitHub Actions で更新する

目次

1. Test-Driven Development with Jest
2. Integrated Tooling with VS Code
3. Testing React with Testing Library
   • シンプルな React Component を TDD で実装する
   • 入れ子になった React Component を TDD で実装する
   • 状態を持つ React Component を TDD で実装する
4. Styling in JavaScript with Styled-Components
5. Refactoring with Hooks
   • カスタムフックを用いたリファクタリング
   • カスタムフックを使った機能拡張
   • useCallback と useRef を使用して不要な更新を防ぐ
6. Continuous Integration and Collaboration

感想

めちゃくちゃ良い本なので、翻訳本が出て日本でも広まってほしい。

ただ、スタイリングにだけ旧世代的な Runtime CSS-in-JS の styled-components を使っているのは、なぜなのかと思った。

本書に沿って書いたコードは radish-miyazaki/Test-Driven-Carousel に置き、Storybook を GitHub Pages で公開している。

関連

• テスト駆動開発
• React
• Testing Library
• Test-Driven React, Second Edition（The Pragmatic Bookshelf）