🚀 Configure Vitest with React Testing Library 🚀

It is 2023 and we have so many options to create a react app that it can be hard to choose between tools, but most people are choosing Vite because of its simplicity and speed. If you are one of those people and are looking for an easy way to setup your tests, you came to the right place!

Let's go right to the point with setting up a new application:

Create a new React app with Vite:

yarn create vite

Install the dependencies

yarn

Install the necessary dependencies

yarn add -D vitest jsdom @testing-library/react @testing-library/jest-dom

Add a test script

In your package.json file, add the following line under the scripts attribute:

"scripts": {
+  "test": "vitest"
}

Create a setup tests file

Create a new file under tests/setup.ts with the following content:

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

expect.extend(matchers);

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

Configure vite to use this setup

Edit the file vite.config.js in the root folder

  plugins: [react()],
+  test: {
+    environment: 'jsdom',
+    setupFiles: ['./tests/setup.ts'],
+    testMatch: ['./tests/**/*.test.tsx'],
+    globals: true
+  }

That is all the configuration needed.
Now, let's go ahead and create a quick test to try this out

Your first test

Create a test file at tests/App.test.tsx

touch tests/App.test.tsx

Add the following content

import { render, screen } from '@testing-library/react';

import App from "../src/App";

describe('App', () => {

  it('renders headline', () => {

    render(<App />);

    const headline = screen.getByText(/It works and you found me!/i);

    expect(headline).toBeInTheDocument();

  });

});

Run the tests (and expect to fail)

yarn test

Fix the test

Replace the html content of the App.tsx file with the following:

+  return (


   <div>
     <h1>It works and you found me!</h1>
   </div>
 )

Run the tests

Try running again the tests, it should be working fine now!

Comments

[Aaron Cooper]

Great article, thanks, but it has an error in the matchers import, at least at the present time in my project (perhaps the API has changed).

You must now use * as matchers in the import inside setup.ts, like this:

import * as matchers from "@testing-library/jest-dom/matchers";

After which it'll work. Cheers!

[Thiago Pacheco]

Thanks a lot, I'll update the post to have the correct import.

[EdWright]

From what I can see v6 of @testing-library/jest-dom removes the need to extend the matchers at all, instead you can just use import '@testing-library/jest-dom/vitest'. This means that the setup file is:

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

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

These are the dependencies in my package.json for reference:

"devDependencies": {
    "@testing-library/jest-dom": "^6.1.4",
    "@testing-library/react": "^14.0.0",
    "@types/react": "^18.2.15",
    "@types/react-dom": "^18.2.7",
    "@vitejs/plugin-react": "^4.0.3",
    "eslint": "^8.45.0",
    "eslint-plugin-react": "^7.32.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.3",
    "jsdom": "^22.1.0",
    "vite": "^4.4.5",
    "vitest": "^0.34.6"
}

Hope this helps!

[Roee Fl]

Thank you for the comment @edwright75 . This is indeed cleaner.

I was about to add the same comment.

@pacheco I'd recommend updating the article ^^

[BrunoLM]

Cleaner and fixes the TypeScript types!

Thank you!

[Aaron Luna]

Thanks a lot!!!

[Muhammad Usman]

Great, thanks Thiago

[LighteningCode]

Thanks so much, very simple and straight forward, this helped me :)

[Monaye Win]

couldn't find testMatch property on the docs. Is it still valid?
+ testMatch: ['./tests/**/*.test.tsx'],?

by default it includes Default: ['**/*.{test,spec}.?(c|m)[jt]s?(x)']
vitest.dev/config/#include

[Ne Da]

You need to add this to the top of the file to fix the type error:
/// <reference types="vitest" />
It's mentioned here in the docs.

[Monaye Win]

Thank you for the great articles. I've followed your and other's article to create starter template. if anyone interested. Welcome any improvement -

github.com/monaye/vite-vitest-reac...

It also has Vitest UI/Coverage as well.

[ardiwsaputra]

Hello, Thanks for the sharing. When i follow the step and run npm run test. I got some warning like bellow, but the test passed. Any solutions?

TypeError: Failed to parse URL from /eslint.json
at Object.fetch (node:internal/deps/undici/undici:11576:11) {
[cause]: TypeError: Invalid URL

[irshad sheikh]

should the config be vitest.config.ts?
i was not able to configure in vite.config.ts

[Thiago Dias]

It has passed some time, but you can configure vitest inside vite.config.ts, using:

/// <reference types="vitest" />
import { defineConfig } from 'vite'

export default defineConfig({
   plugins: [react()],
   test: {
    environment: 'jsdom',
    setupFiles: ['./tests/setup.ts'],
    testMatch: ['./tests/**/*.test.tsx'],
    globals: true
   }
})

[prbxr]

add "types": ["vitest/globals"] to tsconfig compilerOptions

[Will Alicar]

Was getting this error: Property 'toBeInTheDocument' does not exist on type 'JestMatchers'.ts(2339)

Fixed by adding @testing-library/jest-dom to setup.ts

[Aaron Cooper]

This didn't work for me, however adding the following inside src/vite-env.d.ts did the trick to include the ambient types on the expect interface:

/// <reference types="@testing-library/jest-dom" />