How to use Vitest with Jest-DOM and React Testing Library

In this next Code With Me series, I'll be experimenting with the world of Test Driven Development.
Before we get started, we need to set up our environment for testing. I have decided to use Vitest, since I am an avid user of Vite. I don't want to use Create-React-App even though the testing is ready to go. I find CRA bloated and slow, but I still want to use the awesome tools provided by React Testing Library and Jest-dom.
In this video, we walk through the steps required to set up Vitest with JSDOM, React Testing Library and Jest-DOM so we can test our React components.
Vite: vitejs.dev/
Vitest: vitest.dev/
Vitest Example Library: github.com/vitest-dev/vitest/...
Vitest React Testing Lib Example: github.com/vitest-dev/vitest/...

[@fatasefer]

Finally, exactly what I was looking for. Simple and straight to the point. Thank you so much!

[@user-bx5bn5gn9l]

I really needed this one, I am switching to typescript and react-vite now and I am struggling with testing with jest library with typescript. This one is easier to configure and faster. You should continue this TDD serie dude, you will help a lot of young, beginners, junior developers like me

[@ThaRealIansanity]

Great start. I'm taking a vitest course and want to learn to use it with both react and vue. Thank you

[@keifer7813]

Thanks a ton for this. Nice and easy setup, first time using vitest for me

[@wellingtonostemberg7585]

I loved that! It´s exactly what i was looking for. Thank you!

[@kikevanegazz325]

Brother, great tutorial. I like it because it's spot on.

[@SteelGamePad]

great explanation, can't wait for part 2

[@faruzzy]

Thanks for walking us through this!

[@JMIKAEL6]

After 3 hours trying to configure i found your video and solve it in 10min. Thank you so much!

[@ericwinkdev]

So glad that it helped!

[@raj.blazers]

Much thanks man! Helped a lot. 🎉

[@Prathap_SK]

To be honest, It is first video in vitest. It is pretty straightforward to go the content. Thank for clear view

[@ramioooz]

This is a very important video. Thank you for sharing.

[@coderboyakash5853]

This is really helpful for me buddy thanks so much

[@mrluckyuncle]

Excellent. Just what I was looking for. One little thing... it would be nice if the video was available in a higher resolution.

[@BenHuxford]

great video 😊 one thing to note is you install the "jsdom" package at 4:50. In my setup this module is not needed when using testing-library's "jest-dom" because they both perform the same functionality of mimicking the browser DOM

[@ericwinkdev]

Awesome, thanks for the note!

[@paulgasbarra]

This is the most helpful thing.

[@manavjethani4118]

This is really great, i am able to setup vitest with your help, although i am stuck with this error `TypeError: Class extends value undefined is not a constructor or null` while using amcharts4 in our project, wanted to ask do we have to do add any config to allow `Class extends` syntax?

[@WitchingHr]

thank you so much man. this helped a lot

[@timothyshiu2263]

Great video. Do you have a tutorial testing useEffect (custom hook) that fetch api data which is mocked by msw? Thanks in advance

[@mahanmashoof1989]

great intro to vitest! thanks

[@user-mr3yr9qe6d]

clear and helpful. thank you very much

[@kedaraksym12]

Thanks for this manual, I appreciate that ;)

[@bornback4524]

Thx for helping to understand and easy to implement 🙂

[@ericwinkdev]

I'm glad this helped you out!

[@altamashkhan4858]

Thank you for posting this video.

[@brortiz]

Great video, thanks!

[@simonprato9666]

Thanks men, very clear!

[@ahoymatey1234]

I found an alternative to adding those reference types by adding this to my tsconfig "types": [ "vite/client", "vitest/globals" ]

[@1haker]

ABSOLUTLY AMAZING :)

[@Anthony-wg7fn]

Can you do this same thing with the T3 stack?

[@rannue2921]

Thank you so much!!!

[@pranshubasak8796]

You are really a saviour

[@guillermoemmanuelsanchezin1664]

Hi! Would you be so kind to try using vitest with MSW, I would really appreciate it!

[@splat_bang]

Thankyou so much!

[@gustuckit2052]

i get an error saying "no test files found", very weird... :( (im not using ts)

[@dolevdo]

thank you a lot!

[@walidaguib3944]

Thanks a lot😍

[@booi_mangang]

Hey, great video. I've a question. What if you are not using typescript. what changes will there be from your guide?

[@ericwinkdev]

Thanks for checking it out! If you're not using typescript, there's no tsconfig file, and the only differences should be with the file extensions. Rather than .ts and .tsx, you'll use .js and .jsx respsectively. If anything goes wonky let me know and I'll do my best to help out!

[@booi_mangang]

@@ericwinkdev thanks for the reply. I’d figured it out. your video helped.

[@joelkomieter6557]

@@ericwinkdev Creating that jsconfig file won't have any of what tsconfig,json has. What do I need to do about that?

[@abhijitmondalabhi2146]

Most of the things are not working any more. I think they already changed the setups little bit.

[@davidjnevin]

Life saver!

[@kakun7238]

but how do i test for huge components i am stuck

[@yatinpatel4123]

yes, there is no tutorial available like this set for react + vite for testing library.

[@v1r47]

FYI: Vitest 0.33+= requires at least node16 to run properly.

[@Gabriel-kl6bt]

Good. Just why isn't Code suggesting methods from the testing libs?