DEV Community

Cover image for πŸš€ Configure Vitest with React Testing Library πŸš€
Thiago Pacheco
Thiago Pacheco

Posted on

πŸš€ 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
Enter fullscreen mode Exit fullscreen mode

Install the dependencies

yarn
Enter fullscreen mode Exit fullscreen mode

Install the necessary dependencies

yarn add -D vitest jsdom @testing-library/react @testing-library/jest-dom
Enter fullscreen mode Exit fullscreen mode

Add a test script

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

"scripts": {
+  "test": "vitest"
}
Enter fullscreen mode Exit fullscreen mode

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();
});
Enter fullscreen mode Exit fullscreen mode

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
+  }
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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();
  });
});
Enter fullscreen mode Exit fullscreen mode

Run the tests (and expect to fail)

yarn test
Enter fullscreen mode Exit fullscreen mode

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>
+  )
Enter fullscreen mode Exit fullscreen mode

Run the tests

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

it works

Top comments (21)

Collapse
 
alc profile image
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";
Enter fullscreen mode Exit fullscreen mode

After which it'll work. Cheers!

Collapse
 
pacheco profile image
Thiago Pacheco

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

Collapse
 
edwright75 profile image
EdWright • Edited

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();
});
Enter fullscreen mode Exit fullscreen mode

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"
}
Enter fullscreen mode Exit fullscreen mode

Hope this helps!

Thread Thread
 
dopamine0 profile image
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 ^^

Collapse
 
aaronyamil profile image
Aaron Luna

Thanks a lot!!!

Collapse
 
musman0741 profile image
Muhammad Usman

Great, thanks Thiago

Collapse
 
lighteningcode profile image
LighteningCode

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

Collapse
 
monaye profile image
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

Collapse
 
ne_da_6a446bcd21dbc6f8321 profile image
Ne Da • Edited

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.

Collapse
 
monaye profile image
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.

Collapse
 
ardiwsaputra profile image
ardiwsaputra • Edited

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

Image description

Collapse
 
walicar profile image
Will Alicar • Edited

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

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

Collapse
 
alc profile image
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" />
Enter fullscreen mode Exit fullscreen mode
Collapse
 
prbxr profile image
prbxr

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

Collapse
 
tarkeasy profile image
Taras Kulchytskyi

If you have an issue with matchers, your envirement can't see it, just install it.
yarn add -D @types/testing-library__jest-dom

Collapse
 
irshsheik profile image
irshad sheikh

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

Collapse
 
thiago_dias_112eebdfd28ab profile image
Thiago Dias • Edited

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
   }
})
Enter fullscreen mode Exit fullscreen mode
Collapse
 
andrewezeani profile image
Andrew Ezeani

This article was of incredible help to me. Thank you

Collapse
 
blessdarah profile image
Bless Darah Gah

Simple and straight to the point article. I used a vitest.config.ts file for me though.

Collapse
 
coldpen profile image
coldPen • Edited

You also need to include the tests setup file path in tsconfig.json if, like me, only your src dir was included
github.com/testing-library/jest-do...

Collapse
 
fazle-rabbi-dev profile image
Fazle Rabbi

Thanks for sharing this