No video

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/vit...
Vitest React Testing Lib Example: github.com/vit...

Пікірлер: 59

  • @DrumkitCodes
    @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

  • @vponochovny
    @vponochovny8 күн бұрын

    Really nice to link the vitest examples. It helped me much cause my setup was failing for some strange reasons

  • @fatasefer
    @fatasefer10 ай бұрын

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

  • @paulgasbarra
    @paulgasbarra3 ай бұрын

    This is the most helpful thing.

  • @user-bx5bn5gn9l
    @user-bx5bn5gn9l7 ай бұрын

    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

  • @jeff-creations
    @jeff-creationsАй бұрын

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

  • @tobibada6443
    @tobibada6443Ай бұрын

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

  • @JMIKAEL6
    @JMIKAEL610 ай бұрын

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

  • @ericwinkdev

    @ericwinkdev

    10 ай бұрын

    So glad that it helped!

  • @BenHuxford
    @BenHuxford11 ай бұрын

    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

    @ericwinkdev

    11 ай бұрын

    Awesome, thanks for the note!

  • @ramioooz
    @ramioooz10 ай бұрын

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

  • @wellingtonostemberg7585
    @wellingtonostemberg758511 ай бұрын

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

  • @altamashkhan4858
    @altamashkhan485810 ай бұрын

    Thank you for posting this video.

  • @Prathap_SK
    @Prathap_SK5 ай бұрын

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

  • @keifer7813
    @keifer78139 ай бұрын

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

  • @faruzzy
    @faruzzy7 ай бұрын

    Thanks for walking us through this!

  • @FingerTipWisdom
    @FingerTipWisdomАй бұрын

    Thanks lot brother save me lot of time !!!

  • @ThaRealIansanity
    @ThaRealIansanity Жыл бұрын

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

  • @coderboyakash5853
    @coderboyakash58536 ай бұрын

    This is really helpful for me buddy thanks so much

  • @mrluckyuncle
    @mrluckyuncle9 ай бұрын

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

  • @SteelGamePad
    @SteelGamePad Жыл бұрын

    great explanation, can't wait for part 2

  • @WitchingHr
    @WitchingHr Жыл бұрын

    thank you so much man. this helped a lot

  • @kedaraksym12
    @kedaraksym1211 ай бұрын

    Thanks for this manual, I appreciate that ;)

  • @bornback4524
    @bornback4524 Жыл бұрын

    Thx for helping to understand and easy to implement 🙂

  • @ericwinkdev

    @ericwinkdev

    11 ай бұрын

    I'm glad this helped you out!

  • @mahanmashoof1989
    @mahanmashoof1989 Жыл бұрын

    great intro to vitest! thanks

  • @1haker
    @1haker7 ай бұрын

    ABSOLUTLY AMAZING :)

  • @kikevanegazz325
    @kikevanegazz3253 ай бұрын

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

  • @raj.blazers
    @raj.blazers Жыл бұрын

    Much thanks man! Helped a lot. 🎉

  • @user-te9ci1tx4x
    @user-te9ci1tx4xАй бұрын

    I have a problem, MISSING DEPENDENCY Cannot find dependency 'jsdom' Should I install it as devdepend?

  • @abhijitmondalabhi2146
    @abhijitmondalabhi21464 ай бұрын

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

  • @user-mr3yr9qe6d
    @user-mr3yr9qe6d10 ай бұрын

    clear and helpful. thank you very much

  • @pranshubasak8796
    @pranshubasak87968 ай бұрын

    You are really a saviour

  • @simonprato9666
    @simonprato96666 ай бұрын

    Thanks men, very clear!

  • @ahoymatey1234
    @ahoymatey1234 Жыл бұрын

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

  • @kakun7238
    @kakun723810 ай бұрын

    but how do i test for huge components i am stuck

  • @brortiz
    @brortiz7 ай бұрын

    Great video, thanks!

  • @davidjnevin
    @davidjnevin6 ай бұрын

    Life saver!

  • @walidaguib3944
    @walidaguib39446 ай бұрын

    Thanks a lot😍

  • @manavjethani4118
    @manavjethani41186 ай бұрын

    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?

  • @rannue2921
    @rannue29219 ай бұрын

    Thank you so much!!!

  • @somajuice666
    @somajuice6662 ай бұрын

    THANKS

  • @splat_bang
    @splat_bang8 ай бұрын

    Thankyou so much!

  • @yatinpatel4123
    @yatinpatel412311 ай бұрын

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

  • @gustuckit2052
    @gustuckit2052 Жыл бұрын

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

  • @Anthony-wg7fn
    @Anthony-wg7fn Жыл бұрын

    Can you do this same thing with the T3 stack?

  • @guillermoemmanuelsanchezin1664
    @guillermoemmanuelsanchezin1664 Жыл бұрын

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

  • @dolevdo
    @dolevdo Жыл бұрын

    thank you a lot!

  • @booi_mangang
    @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

    @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

    @booi_mangang

    Жыл бұрын

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

  • @joelkomieter6557

    @joelkomieter6557

    Жыл бұрын

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

  • @v1r47
    @v1r47 Жыл бұрын

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

  • @Gabriel-kl6bt
    @Gabriel-kl6bt4 ай бұрын

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