fullstack react tdd example

反応コンポーネント駆動型開発とDOMテストモノレポ

Reactコンポーネント駆動型開発＆DOMテストモノレポへようこそ！このリポジトリには、テスト駆動型開発（TDD）とDOMテストを使用した反応アプリケーションの構築に関する包括的な講演のためのすべてのコードと例が含まれています。これがトーク自体へのリンクです。 Monorepoは、PNPMとTurborepoを使用して編成されており、パッケージ管理と構築プロセスを合理化しています。

モノレポの概念に精通していない場合は、複数のプロジェクトを含む単一のリポジトリです。この場合、モノレポには共有UIライブラリといくつかのReactアプリケーションが含まれています。共有UIライブラリには、再利用可能でアクセス可能なReactコンポーネントと、テストとストーリーが含まれています。 Reactアプリケーションは、コンポーネントの使用と統合を示しています。 Next.jsアプリケーションは、Mantine UIライブラリのモーダルコンポーネントとの反応における構成の力を示しています。

Monoreposの詳細については、こちらをご覧ください。

概要

このモノレポの主な目標は、再利用可能でアクセス可能な反応コンポーネントを構築するためのベストプラクティスと、Reactテストライブラリやストーリーブックなどのツールを使用して効果的にテストする方法を実証することです。さらに、テストの外部依存関係を処理するための模擬サービスワーカーの使用を紹介し、アクションのバックエンド（BFF）パターンを示しています。この講演は、フロントエンドとバックエンドの体験が混在しているオーディエンス向けに調整され、反応の構成の力と、コンポーネントの開発とテストの両方にどのように適用されるかを強調しています。

最終的に、このインターフェイスを構築およびテストする方法を確認します。

コンテンツ

モノレポは次のように構成されています。

アプリ

• frontend ：Create React Appを使用して構築されたReactアプリケーションは、コンポーネントの使用と統合を実証します。
• mantine-example ：Mantine UI Libraryのモーダルコンポーネントとの反応における構成の力を示すNext.jsアプリケーション。このアプリは、講演の紹介として使用され、反応コンポーネントを構築およびテストする際の構成の利点を強調しています。

パッケージ

• ui ：テストとストーリーとともに、再利用可能でアクセス可能な反応コンポーネントを含む共有UIライブラリの例。
• types ：他のパッケージで使用されるタイプスクリプトタイプを含む共有ライブラリ。
• mocks ：他のパッケージで使用されるモックデータを含む共有ライブラリ。

はじめる

モノレポを実行するには、PNPMをグローバルにインストールする必要があります。

このモノレポを開発するときに使用されるPNPMのバージョンは8.2.0 、ノードバージョン18.16.0です。

インストールされたストーリーブックのバージョンには、以前のバージョンのノードを実行する際に問題があります。少なくともノードバージョン18.16.0使用してください。

モノレポの依存関係をインストールするには、次のコマンドを実行します。

pnpm install
pnpm build

モノレポは、次のコマンドを使用して実行できます。

• pnpm run dev ：開発モードでモノレポを実行します。
• pnpm run build ：生産用のモノレポを構築します。
• pnpm run start ：生産モードでモノレポを実行します。
• pnpm run test ：モノレポテストを実行します。

ストーリーブックを実行するには、次のコマンドを実行します。

pnpm run storybook

実行中のテスト

リポジトリのすべてのテストを実行するか、特定のパッケージのテストを実行できます。

すべてのテストを実行するには、次のコマンドを実行します。

pnpm run test

特定のパッケージのテストを実行するには、ディレクトリにCDを使用して、次のコマンドを実行します。

pn test -- --watch

アプリケーションテストを実行するには、次のコマンドを実行します。

 cd apps/frontend
pnpm run test -- --watch

コンポーネントテストを実行するには、次のコマンドを実行します。

 cd packages/ui
pnpm run test -- --watch

このモノレポは、Reactコンポーネント駆動型開発とDOMテストのベストプラクティスを理解するのに役立つことを願っています。コードを探索し、例を実行し、リポジトリに貢献してください。ハッピーコーディング！

余分なメモ

モダンなフロントエンドの提案されたAPIアーキテクチャは、フロントエンドパターンのバックエンドです。

詳細については、こちらをご覧ください。

AIは講演のメモを生成しました

これがプレゼンテーションからの要約と重要な持ち帰りです。

概要：Pack SoftwareのディレクターであるPaul Hammondは、テスト駆動型開発、アクセシビリティ、最新のフロントエンドプラクティスなどのトピックをカバーするReactおよびDOMテストを備えたコンポーネント駆動型開発を提示します。

アイデア：

• コンポーネント駆動型開発は、再利用可能で一貫したUI要素の構築に役立ちます
• 実装の詳細ではなく動作に対するテストは、より多くの価値を提供します
• フロントエンドコンポーネントを構築する場合、アクセシビリティが重要な考慮事項になるはずです
• ストーリーブックのようなツールにより、インタラクティブな開発とコンポーネントのドキュメントが可能になります
• モックサービスワーカーは、テストと開発の両方のAPI呼び出しをモッキングできるようにします
• フロントエンド（BFF）パターンのバックエンドは、フロントエンドアーキテクチャを簡素化できます
• 良いテストは、時間の経過とともに変更を行う自信を与えます
• Reactテストライブラリは、ユーザーの観点からテストを促進します
• TDDは、より保守可能で柔軟なコードにつながる可能性があります
• 構成可能なコンポーネントにより、カスタマイズと再利用が簡単になります

洞察：

• 実装の代わりに動作をテストすることで、リファクタリングとメンテナンスを容易にすることができます
• テストでアクセス可能なセレクターは、全体的なアプリケーションのアクセシビリティを改善できます
• ストーリーブックのようなコンポーネントエクスプローラーは、デザイナーと開発者の間のコラボレーションを促進します
• ネットワークレベルでのモッキングにより、テストと開発全体で一貫したモックが可能になります
• TDDは、フィードバックループをより高速化し、コードの変更に対するより高い信頼性につながる可能性があります
• 配信成果に焦点を当てることは、チームにTDDプラクティスを採用するよう説得するのに役立ちます
• DOMを使用してテストを密接に模倣する実際のユーザーインタラクションは
• UIの懸念をビジネスロジックから分離すると、全体的なアプリケーションアーキテクチャが改善されます
• 「ウォーキングスケルトン」のような継続的な配送慣行は、プロジェクトのセットアップを改善できます
• ユニットテストと統合/E2Eテストのバランスを取ると、さまざまなテストシナリオがカバーされます

引用：

• 「良いテストの目的は、時間の経過とともに変更を行う自信を与えることです。」
• 「テストが通過している場合は、生産に直接移動するのに十分な自信を感じる必要があります。」
• 「モダンフロントエンドは、ページではなくコンポーネントで構築されています。」
• 「コンポーネント駆動型開発は、重複を減らす再利用可能なコンポーネントを構築するのに役立ちます。」
• 「私たちは、時間の経過とともにどのように変更を加えるか、どのようにテストが時間の経過とともに変更を行うのに役立つかを見たいと思っています。」
• 「良いテストは、時間の経過とともに変更を加える自信を与えるはずです。」
• 「TDDの喜びは、それが非常に解放的な経験だからです。」
• 「私は10年間遅れて仕事をしていません。必要ではないので、テストファーストスタイルで書く場合は必要ないはずです。」
• 「テストに関しては、私が通常することの1つは...誰かの枝を引き下げ、テストを実行し、意図的に何かを失敗させ、テストを見ることです。」
• 「それが機能する方法である自信が必要です。」

習慣：

• 適切なテストカバレッジを確実にするための実装コードの前にテストを書き込む
• テストでアクセス可能なセレクターを使用して、全体的なアクセシビリティを改善します
• ストーリーブックなどのツールを使用して、デザイナーと密接に協力します
• 強力なテストスイートを用意して自信を持ってコードをリファクタリングします
• 開発中のインスタントフィードバックのために時計モードでテストを実行する
• モックサービスワーカーを使用して、テストでAPI応答をシミュレートする
• プロジェクトの早い段階でCI/CDパイプラインを確立するためにウォーキングスケルトンを構築する
• テストカバレッジを検証するために、意図的にコードを壊すことにより、プルリクエストを確認してください
• フロントエンドテストでの実装の詳細よりもテスト動作を優先します
• フロントエンド開発でベストプラクティスを継続的に学び、適用します

事実：

• Reactテストライブラリは、DOMテストライブラリの上に構築されています
• Jestは、テストにJSDOMと呼ばれるインメモリDOM表現を使用します
• モックサービスワーカーは、ネットワークレベルでAPI呼び出しを傍受および模倣することができます
• ストーリーブックは、UIコンポーネントを単独で開発するためのツールです
• アクセシビリティは、何らかの形で人口の30〜40％に影響します
• コンポーネント駆動型開発はフレームワークに依存しており、反応、vue、角度などに適用されます。
• テスト駆動型開発は、バグの減少と保守可能なコードにつながる可能性があります
• フロントエンドパターンのバックエンドは、フロントエンドのパフォーマンスを改善し、アーキテクチャを簡素化できます
• サイプレスと劇作家は、ウェブアプリケーションのエンドツーエンドテストのためのツールです
• 突然変異テストは、テストスイートの品質を検証するために使用できます

参考文献：

• 反応テストライブラリ
• ストーリーブック
• 模擬サービスワーカー
• 冗談
• サイプレス
• 劇作家
• Redux Toolkit
• Reactクエリ
• JavaScriptのテスト（Kent C. Doddsによる）
• W3C Webアクセシビリティイニシアチブ（WAI）
• イアン・クーパーの講演「TDD：どこがうまくいかなかったのか」
• Github Primer（UIコンポーネントライブラリ）
• ライブラリの遊び場のテスト
• フロントエンド（BFF）パターンのバックエンド

ワンセンテンステイクアウト：Reactテストライブラリを使用したテスト駆動型開発により、行動とアクセシビリティに焦点を当てることにより、自信を持って保守可能なフロントエンドコードを可能にします。

推奨事項：

• フロントエンドアプリケーションの再利用性と一貫性を改善するために、コンポーネント駆動型開発を採用する
• Storybookまたは同様のツールを使用して、UIコンポーネントを開発および文書化する
• 品質を向上させるために、フロントエンドコードのテスト駆動型開発プラクティスを実装する
• より弾力性のあるテストのための実装の詳細ではなく、テスト動作に焦点を当てる
• テストと開発における一貫したAPIモッキングのために模擬サービスワーカーを利用する
• フロントエンドアーキテクチャを簡素化するために、フロントエンドパターンのバックエンドの実装を検討してください
• 最初からコンポーネントの設計とテストのアクセシビリティを優先する
• React Testing Libraryのアクセス可能なセレクターを使用して、全体的なアプリケーションアクセシビリティを改善します
• プロジェクトの早い段階で継続的な統合と配信の実践を実装します
• 包括的なカバレッジのための統合およびエンドツーエンドのテストとの単位テストのバランス