「労働者が自分の仕事をうまくやりたいなら、まず自分の道具を研ぎ澄まさなければなりません。」 - 孔子、「論語。陸霊公」
表紙 > プログラミング > Vitest、MSW、およびPlaywright in React+Vite+TSプロジェクトの構成-Part 3

Vitest、MSW、およびPlaywright in React+Vite+TSプロジェクトの構成-Part 3

2025-04-17に投稿されました
ブラウズ:674

Playwrightは、Webアプリのフレームワークに依存しないエンドツーエンドテスト(E2Eまたは統合テストとも呼ばれる)です。 Playwrightには優れた開発者の経験があり、テストを簡単に変更するのに優れた執筆を行います。


1.劇作家をインストールします

劇作家をセットアップするには、次のコマンドを実行します。

npm init playwright@latest

ターミナルのセットアップウィザードをガイドします。 「エンドツーエンドのテストをどこに配置するか」でプロンプトされた場合、にsrc/テストに設定できます(以前のチュートリアルで推奨されています)。

Configure Vitest, MSW and Playwright in a React project with Vite and TS - Part 3

package.jsonにスクリプトを追加します

Package.jsonで、劇作家テストを実行するために次の2つのスクリプトを追加します:

Configure Vitest, MSW and Playwright in a React project with Vite and TS - Part 3

これにより、開発環境とCI環境の両方でテストを実行できます。

劇作家構成

playwright.config.tsファイルは次のように構成する必要があります。

Configure Vitest, MSW and Playwright in a React project with Vite and TS - Part 3

構成の重要な変更:

  • use.baseurl :これは、開発サーバーのベースURLを設定するため、すべてのテストで記述する必要はありません。
  • WebServer :このブロックは、開発サーバーを開始する方法を説明しています。 CI環境にいない限り、すでに実行されているサーバーが再利用されます。
  • testdir :劇作家がE2Eテストを探すべきディレクトリ(この場合、SRC/tests/e2e)。
2。ブラウザテスト用にMSWを構成します

これまでのところ、MSWはnode.js環境でAPI応答をock笑するためにセットアップされています。ただし、Playwrightはテストに実際のブラウザを使用するため、ブラウザ環境で動作するようにMSWを構成する必要があります。

ブラウザベースのテストにMSWサービスワーカーを登録する新しいJavaScriptモジュールを作成します:

Configure Vitest, MSW and Playwright in a React project with Vite and TS - Part 3

3.開発モードでワーカーを登録します

アプリが開発モードで実行されているときにMSWワーカーを起動するには、アプリのルートモジュール(例:src/main.tsx)に以下を追加します:

Configure Vitest, MSW and Playwright in a React project with Vite and TS - Part 3

.envファイルにvite_api_mock環境変数を必ず設定してください:


vite_api_mock = "true"
VITE_API_MOCK="true"
4。E2Eテストを書きます

これで、アプリのフローのE2Eテストを記述できます。これが劇作家の例です:

Configure Vitest, MSW and Playwright in a React project with Vite and TS - Part 3

5。テストの実行

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


NPM実行テスト:E2E:CI
VITE_API_MOCK="true"
これは、自動化されたパイプラインに役立つCIモードでテストを実行します。

リリースステートメント この記事は、https://dev.to/juan_deto/configure-vitest-msw-and-playwright-in-a-react-project-with-vite-and-ts-part-3-32pe?1に再現されています。
最新のチュートリアル もっと>

免責事項: 提供されるすべてのリソースの一部はインターネットからのものです。お客様の著作権またはその他の権利および利益の侵害がある場合は、詳細な理由を説明し、著作権または権利および利益の証拠を提出して、電子メール [email protected] に送信してください。 できるだけ早く対応させていただきます。

Copyright© 2022 湘ICP备2022001581号-3