DEV Community

Cover image for 🚀 Configure Vitest with React Testing Library 🚀

🚀 Configure Vitest with React Testing Library 🚀

Thiago Pacheco on March 16, 2023

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...
Read full post
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 ^^

Thread Thread
 
brunolm profile image
BrunoLM •

Cleaner and fixes the TypeScript types!

Thank you!

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
 
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
 
prbxr profile image
prbxr •

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

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
 
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
 
andrewezeani profile image
Andrew Ezeani •

This article was of incredible help to me. Thank you

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
 
blessdarah profile image
Bless Darah Gah •

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

Collapse
 
fazle-rabbi-dev profile image
Fazle Rabbi •

Thanks for sharing this