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

  Рет қаралды 33,720

EricWinkDev

EricWinkDev

Жыл бұрын

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

Пікірлер: 58
@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
@fatasefer
@fatasefer 10 ай бұрын
Finally, exactly what I was looking for. Simple and straight to the point. Thank you so much!
@paulgasbarra
@paulgasbarra 2 ай бұрын
This is the most helpful thing.
@user-bx5bn5gn9l
@user-bx5bn5gn9l 6 ай бұрын
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
@ThaRealIansanity Жыл бұрын
Great start. I'm taking a vitest course and want to learn to use it with both react and vue. Thank you
@keifer7813
@keifer7813 8 ай бұрын
Thanks a ton for this. Nice and easy setup, first time using vitest for me
@SteelGamePad
@SteelGamePad Жыл бұрын
great explanation, can't wait for part 2
@jeff-creations
@jeff-creations 19 күн бұрын
Nice presentation and super useful! Thank you so much, my component tests don't error out now. Keep up the great work!
@faruzzy
@faruzzy 6 ай бұрын
Thanks for walking us through this!
@wellingtonostemberg7585
@wellingtonostemberg7585 10 ай бұрын
I loved that! It´s exactly what i was looking for. Thank you!
@raj.blazers
@raj.blazers Жыл бұрын
Much thanks man! Helped a lot. 🎉
@JMIKAEL6
@JMIKAEL6 10 ай бұрын
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!
@ramioooz
@ramioooz 10 ай бұрын
This is a very important video. Thank you for sharing.
@tobibada6443
@tobibada6443 16 күн бұрын
I was so giddy after hearing the name😂. Randomly chose the video and heard a name from my best tech podcast🤭🤭
@coderboyakash5853
@coderboyakash5853 5 ай бұрын
This is really helpful for me buddy thanks so much
@WitchingHr
@WitchingHr Жыл бұрын
thank you so much man. this helped a lot
@mahanmashoof1989
@mahanmashoof1989 11 ай бұрын
great intro to vitest! thanks
@altamashkhan4858
@altamashkhan4858 9 ай бұрын
Thank you for posting this video.
@bornback4524
@bornback4524 11 ай бұрын
Thx for helping to understand and easy to implement 🙂
@ericwinkdev
@ericwinkdev 11 ай бұрын
I'm glad this helped you out!
@user-mr3yr9qe6d
@user-mr3yr9qe6d 10 ай бұрын
clear and helpful. thank you very much
@kedaraksym12
@kedaraksym12 10 ай бұрын
Thanks for this manual, I appreciate that ;)
@BenHuxford
@BenHuxford 11 ай бұрын
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!
@simonprato9666
@simonprato9666 5 ай бұрын
Thanks men, very clear!
@brortiz
@brortiz 7 ай бұрын
Great video, thanks!
@FingerTipWisdom
@FingerTipWisdom 22 күн бұрын
Thanks lot brother save me lot of time !!!
@Prathap_SK
@Prathap_SK 5 ай бұрын
To be honest, It is first video in vitest. It is pretty straightforward to go the content. Thank for clear view
@mrluckyuncle
@mrluckyuncle 9 ай бұрын
Excellent. Just what I was looking for. One little thing... it would be nice if the video was available in a higher resolution.
@1haker
@1haker 6 ай бұрын
ABSOLUTLY AMAZING :)
@pranshubasak8796
@pranshubasak8796 7 ай бұрын
You are really a saviour
@rannue2921
@rannue2921 8 ай бұрын
Thank you so much!!!
@walidaguib3944
@walidaguib3944 5 ай бұрын
Thanks a lot😍
@kikevanegazz325
@kikevanegazz325 2 ай бұрын
Brother, great tutorial. I like it because it's spot on.
@splat_bang
@splat_bang 7 ай бұрын
Thankyou so much!
@dolevdo
@dolevdo Жыл бұрын
thank you a lot!
@ahoymatey1234
@ahoymatey1234 Жыл бұрын
I found an alternative to adding those reference types by adding this to my tsconfig "types": [ "vite/client", "vitest/globals" ]
@davidjnevin
@davidjnevin 5 ай бұрын
Life saver!
@manavjethani4118
@manavjethani4118 5 ай бұрын
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?
@abhijitmondalabhi2146
@abhijitmondalabhi2146 4 ай бұрын
Most of the things are not working any more. I think they already changed the setups little bit.
@jeppe7328
@jeppe7328 Ай бұрын
THANKS
@guillermoemmanuelsanchezin1664
@guillermoemmanuelsanchezin1664 Жыл бұрын
Hi! Would you be so kind to try using vitest with MSW, I would really appreciate it!
@Anthony-wg7fn
@Anthony-wg7fn Жыл бұрын
Can you do this same thing with the T3 stack?
@user-te9ci1tx4x
@user-te9ci1tx4x Ай бұрын
I have a problem, MISSING DEPENDENCY Cannot find dependency 'jsdom' Should I install it as devdepend?
@kakun7238
@kakun7238 10 ай бұрын
but how do i test for huge components i am stuck
@yatinpatel4123
@yatinpatel4123 11 ай бұрын
yes, there is no tutorial available like this set for react + vite for testing library.
@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.
@gustuckit2052
@gustuckit2052 Жыл бұрын
i get an error saying "no test files found", very weird... :( (im not using ts)
@Gabriel-kl6bt
@Gabriel-kl6bt 4 ай бұрын
Good. Just why isn't Code suggesting methods from the testing libs?
Testing In React Tutorial - Jest and React Testing Library
21:28
НЫСАНА КОНЦЕРТ 2024
2:26:34
Нысана театры
Рет қаралды 1,4 МЛН
Они так быстро убрались!
01:00
Аришнев
Рет қаралды 1,5 МЛН
Идеально повторил? Хотите вторую часть?
00:13
⚡️КАН АНДРЕЙ⚡️
Рет қаралды 4,2 МЛН
58.Unit Of Work in ASP.Net Core MVC شرح بالعربي
36:20
React Unit Testing Crash Course: Beginner to Advanced Guide
42:59
Monsterlessons Academy
Рет қаралды 1,8 М.
Vitest with React Testing Library, Jest-dom & MSW
18:44
Learn from Scratch
Рет қаралды 9 М.
The ONLY REASON To Unit Test
8:26
Theo - t3․gg
Рет қаралды 75 М.
Stop Writing So Many Tests
10:02
Web Dev Simplified
Рет қаралды 85 М.
Тестирование React приложения
1:03:02
Михаил Непомнящий
Рет қаралды 63 М.
Why Vitest Is Better Than Jest
13:13
Web Dev Simplified
Рет қаралды 131 М.
Learn Vitest and Testing Library In 40 Minutes
40:12
Program With Erik
Рет қаралды 54 М.
Next.js with React Testing Library, Jest, TypeScript
25:04
Dave Gray
Рет қаралды 58 М.
Fast Unit Testing With Vitest
1:21:09
Learn With Jason
Рет қаралды 29 М.
ГЕНИАЛЬНОЕ РЕШЕНИЕ (@fusterdeltiktok - TikTok)
0:18
В ТРЕНДЕ
Рет қаралды 7 МЛН
ДОМАШНЕЕ ЭСКИМО//ПРОВЕРКА РЕЦЕПТА ТИК ТОК
0:22
ОЛЯ ПЕРЧИК
Рет қаралды 1,3 МЛН
Опасный Лимонный Сок! 🤯
0:25
ШОК
Рет қаралды 2,2 МЛН