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

Hi, web traveler! If you're here, it's probably because you understand the importance of good testing—or maybe you're just tired of the QA team pointing out issues. Either way, you're in the right place. This guide will help you configure and integrate tools that cover all the angles of testing your app.

Just a quick reminder of what this tools are:

• Vitest: For unit testing. If you've used Jest, this tool is quite similar but powered by the Vite engine.
• MSW(Mock Service Worker): A tool that intercepts API calls and changes their response, so you can test different scenarios in your app without relying on real API endpoints.
• Playwirght: For end-to-end testing.

For this guide, we'll configure a simple React app with Vite. The app will query the public API of the Art Institute of Chicago, display the items in cards, and, when a user clicks on a card, navigate to a detailed view. If you're curious about the API, check it out here.

You can clone the basic code to start this guide in this repo. Here is a snapshot:

Vitest

We'll start by configuring Vitest. If you’ve set up your app with Vite, you’ll probably want to use Vitest since it has a similar API to Jest but is optimized for the Vite environment. Let’s go step-by-step through the configuration.

1. Install packages

First, install these packages as dev dependencies:

npm install -D @testing-library/react vitest jsdom @types/testing-library__jest-dom @testing-library/user-event

Here is what you have installed:

• @testing-library/react: classic library build on top of the DOM Testing LIbrary to work with React components --> it lets you render and query React Components
• vitest: test runner --> it runs your tests
• jsdom: acts as a lightweight browser, creating an environment that simulates the DOM so you can test DOM-related behavior
• @types/testing-library__jest-dom: adds typing
• @testing-library/user-event: is partner of @testing-library/react: and adds simulation of user interactions with browser

2. Configure Vite to handle tests with Vitest

Next, modify your vite.config.ts like this:

3. Setup files

Create the setup file we specified in vite.config.ts. Inside src, create tests folder, and inside that, create Setup.ts with the following basic setup:

import { afterEach } from 'vitest';
import { cleanup } from '@testing-library/react';
import '@testing-library/jest-dom';

afterEach(() => {
  cleanup();
});

Now, update your tsconfig.json to include Vitest types:

{
  "compilerOptions": {
    ...
    "types": ["vitest/globals"] 
  }
}

and don't forget to include the scripts in package.json:

{
 "scripts": {
    ...
    "test": "vitest",
    "test:watch": "vitest --watch"
  }
}

4. Utils

This is an extra step, but it’s super helpful to create a utility file for your tests. Inside the tests folder, create a TestUtils.tsx file:

Explanation:

1. The Wrapper function wraps your components in a BrowserRouter. You can extend this by adding other providers like QueryClientProvider or IntlProvider as needed.
2. customRender provides this wrapper to the render function, and you can pass additional options as required.
3. You export the necessary utilities from @testing-library/react.
4. The setup function simplifies test setup by providing access to userEvent and the custom render function.

5. Testing.

Finally, let’s test our configuration with a basic test in CopyrightWarning.test.tsx`. For examplee:

This should provide a solid guide for integrating Vitest into your project. Next steps will involve configuring MSW and Playwright for complete test coverage. Stay tuned!