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...
For further actions, you may consider blocking this person and/or reporting abuse
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 insidesetup.ts
, like this:After which it'll work. Cheers!
Thanks a lot, I'll update the post to have the correct import.
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:These are the dependencies in my package.json for reference:
Hope this helps!
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 ^^
Thanks a lot!!!
Great, thanks Thiago
Thanks so much, very simple and straight forward, this helped me :)
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
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.
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
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.
should the config be
vitest.config.ts
?i was not able to configure in
vite.config.ts
It has passed some time, but you can configure vitest inside
vite.config.ts
, using:add
"types": ["vitest/globals"]
to tsconfig compilerOptionsWas getting this error: Property 'toBeInTheDocument' does not exist on type 'JestMatchers'.ts(2339)
Fixed by adding
@testing-library/jest-dom
tosetup.ts
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 theexpect
interface:If you have an issue with matchers, your envirement can't see it, just install it.
yarn add -D @types/testing-library__jest-dom
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...
Simple and straight to the point article. I used a vitest.config.ts file for me though.
This article was of incredible help to me. Thank you
Thanks for sharing this