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

Playwright is a framework-agnostic end-to-end testing (also known as E2E, or integration testing) tool for web apps. Playwright has great developer experience and makes writing good and resilient to changes tests straightforward.

---

1. Install Playwright

To set up Playwright, run the following command:

npm init playwright@latest

You'll be guided through a setup wizard in your terminal. When prompted with "Where to put your end-to-end tests?", you can set it to src/tests (as recommended in earlier tutorials).

Add Scripts to package.json

In your package.json, add the following two scripts for running Playwright tests:

This allows you to run the tests in both development and CI environments.

Playwright Configuration

The playwright.config.ts file should be configured as follows:

Key Changes in the Configuration:

• use.baseURL: This sets the base URL of your development server, so you don’t have to write it in every test.
• webServer: This block describes how to start your development server. It will reuse an already-running server unless you are in a CI environment.
• testDir: The directory where Playwright should look for your E2E tests (in this case, src/tests/e2e).

2. Configure MSW for Browser Testing

So far, MSW has been set up for mocking API responses in a Node.js environment. However, because Playwright uses a real browser for testing, you need to configure MSW to work in the browser environment.

Create a new JavaScript module that will register the MSW service worker for browser-based tests:

3. Register the Worker in Development Mode

To start the MSW worker when the app is running in development mode, add the following to your app’s root module (e.g., src/main.tsx):

Make sure to set the VITE_API_MOCK environment variable in your .env file:

VITE_API_MOCK="true"

4. Write an E2E Test

Now you can write an E2E test for a flow in your app. Here’s an example Playwright test:

5. Running the Test

To run the E2E test, use the following command:

npm run test:e2e:ci

This will execute the test in CI mode, which is useful for automated pipelines.

The above is the detailed content of Configure Vitest, MSW and Playwright in a React project with Vite and TS - Part 3. For more information, please follow other related articles on the PHP Chinese website!