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.

[DrumkitCodes]

Thanks so much for the tutorial! I couldn't figure out how to get vitest working before, I really appreciate how you went through the full setup and explained why we were setting certain things to certain values. Can't wait to see more in your TDD series

[fatasefer]

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

[jeff-creations]

Nice presentation and super useful! Thank you so much, my component tests don't error out now. Keep up the great work!

[bxbngnl]

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

[keifer]

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

[tobibada]

I was so giddy after hearing the name😂. Randomly chose the video and heard a name from my best tech podcast🤭🤭

[wellingtonostemberg]

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

[SteelGamePad]

great explanation, can't wait for part 2

[JMIKAEL]

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

[ramioooz]

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

[coderboyakash]

This is really helpful for me buddy thanks so much

[WitchingHr]

thank you so much man. this helped a lot

[kedaraksym]

Thanks for this manual, I appreciate that ;)

[mryrqed]

clear and helpful. thank you very much

[bornback]

Thx for helping to understand and easy to implement 🙂

[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

[Prathap_SK]

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

[timothyshiu]

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