0Pricing
React Academy · レッスン

React Testing Library + Vitest/Jestのセットアップ

React Testing LibraryとVitest/Jestをインストールして設定し、jsdomを使ってcomponentをrenderし、ユーザーのようにDOMを検索します。

「React Testing Library + Vitest/Jestのセットアップ」はCoddyKit上の無料React Academyレッスンです。 これはレッスン1/3です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはReact Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 React Academyコースには全3レッスンが含まれています。

この構成を使う理由

目標：ユーザーの操作を再現する形でコンポーネントをテストします。

  • Vitest/Jestランナー
  • jsdom環境
  • React Testing Library (RTL)

インストールと環境設定

インストール：

  • npm i -D vitest @testing-library/react @testing-library/user-event jsdom
  • テスト環境をjsdomに設定します
  • スクリプトにtestとtest:watchを追加します

テスト対象のデモコンポーネント

この小さなコンポーネントは、明確なロール、名前、状態を公開しているため、テストからクエリで取得できます。


<div id="root"></div>

プレビュー：テストファイルの内容

RTL + Vitestを使ったテストのプレビューです。参照用にファイルの内容を表示します。


<div id="root"></div>

設定の基本

  • 環境：jsdom
  • セットアップ：必要に応じて@testing-library/jest-domを追加します
  • スクリプト："test"、"test:watch"

ユーザーのようにクエリする

推奨されるクエリ：

  • getByRole / findByRole
  • getByLabelText
  • getByText

適切なアクセシブルクエリがない場合に限り、テストIDを使用します。

RTLクエリのガイドライン確認

React Testing Libraryで要素を見つける際に推奨されるクエリはどれですか？

まとめ

まとめ：Vitest/JestとRTLをインストールし、jsdomを設定してコンポーネントをレンダーします。ロールやラベルによるクエリを優先し、現実的な操作にはuser-eventを追加します。

よくある質問

「React Testing Library + Vitest/Jestのセットアップ」レッスンは無料ですか？

はい。「React Testing Library + Vitest/Jestのセットアップ」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、React Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 React Academyコースには全3レッスンが含まれています。

「React Testing Library + Vitest/Jestのセットアップ」で何を学びますか？

React Testing LibraryとVitest/Jestをインストールして設定し、jsdomを使ってcomponentをrenderし、ユーザーのようにDOMを検索します。 ブラウザで直接実行するハンズオンコードでReact Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

React Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのReact Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/3です。

「React Testing Library + Vitest/Jestのセットアップ」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このReact Academyレッスンでコードを書いて実行できますか？

はい。すべてのReact Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. React Testing Library + Vitest/Jestのセットアップ
  2. Queries、Events、Assertions――Formと非同期UI
  3. FetchとTimerのMock
← React Academyに戻る