DEV Community

🚀 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

Aaron Cooper • Aug 23 '23

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 • Sep 7 '23

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

EdWright • Nov 1 '23 • 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();
});

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 • Dec 1 '23

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 ^^

Aaron Luna • May 6 '23

Thanks a lot!!!

Muhammad Usman • Apr 1 '23

Great, thanks Thiago

LighteningCode • Apr 29 '23

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

Monaye Win • Jan 24

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

ardiwsaputra • Aug 30 '23 • 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

Monaye Win • Jan 24

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.

prbxr • Dec 25 '23

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

Taras Kulchytskyi • May 19 '23

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

irshad sheikh • Jul 30 '23

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

Will Alicar • Aug 17 '23 • 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

Aaron Cooper • Aug 24 '23

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" />

coldPen • Mar 5 • 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...

Bless Darah Gah • May 31 '23

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

Andrew Ezeani • Dec 14 '23

This article was of incredible help to me. Thank you

Fazle Rabbi • Aug 15 '23

Thanks for sharing this