React Unit Testing Tutorial With React Testing Library and Vitest React

In this React testing tutorial you will learn how to test React correctly. As React doesn't give us any testing tools we will use React testing library and Vitest in order to get an easy testing setup.
TIMESTAMPS
0:00 Introduction
1:39 Initial project
2:24 Vitest React
3:48 Basic component testing
9:26 Testing React props
12:40 Testing React callbacks
14:56 React mock dependencies
17:06 Testing plain functions
► CHECK MY COURSES - monsterlessons-academy.com/co...
MOST POPULAR COURSES
► Building real project with Angular + NgRx - monsterlessons-academy.com/co...
► Building real NestJS API - monsterlessons-academy.com/co...
► Javascript interview questions - monsterlessons-academy.com/co...
► Angular Interview Questions monsterlessons-academy.com/co...
► Building real fullstack project - monsterlessons-academy.com/co...
► Mastering Git - monsterlessons-academy.com/co...
► Mastering Docker and Docker Compose - monsterlessons-academy.com/co...
► Building real project with React Hooks - monsterlessons-academy.com/co...
► Building real project with Vue + Vuex - monsterlessons-academy.com/co...
FOLLOW ME
► TWITTER - / monster_lessons
► INSTAGRAM - / monsterlessonsacademy
► TIKTOK - / monsterlessonsacademy
REFERENCES
► Source code - github.com/monsterlessonsacad...

[@garikmelqonyan6011]

Good job, bro!
Btw, you said you have solved the issue with `SyntaxError: Cannot use import statement outside a module jest`.
Can you pls tell how you have done it?
There is tons of info about it but none of them solves the issue...

[@devyadav0399]

Really helpful, keep up the good work!

[@MonsterlessonsAcademy]

Wil do!

[@kmdoll]

Thanks for the video. Very helpful. Just curious, when you code personal projects, do you start with tests first or do you start with writing code first? Thanks.

[@MonsterlessonsAcademy]

Code first.

[@peshutanpavri1599]

Very good video, Thank you for sharing. I was thinking, since Cypress has its Component testing, is it not possible to just use Cypress ?

[@MonsterlessonsAcademy]

You kind of can, but it is not a replacement for normal unit testing. Cypress just lacks flexibility of unit testing.

[@peshutanpavri1599]

Thank you so much@@MonsterlessonsAcademy for getting back to me. Yeah that makes sense, I am just trying to get the most complete setup without excess dependencies,
I guess I will use this for Unit tests, and possibly for component too, then cypress just for E2E

[@haidarmuhammadnaufal160]

I cannot insert my component inside render(). It's said that my component is a type even thought it isn't

[@MonsterlessonsAcademy]

Unfortunately I help with code debugging only in the paid courses as it takes a lot of time and effort.

[@waleedsharif618]

Does it work normally if we use React testing library + jest + vite and not vitest ?

[@MonsterlessonsAcademy]

Yes obviously

[@niloben659]

@@MonsterlessonsAcademy It's not obvious, it's a legitimate question. I was wondering the same thing

[@MonsterlessonsAcademy]

@@niloben659 Sorry, when I', writing code I always do it so it works for people in different os, use cases etc. This is why for me it is obviously :)

[@niloben659]

@@MonsterlessonsAcademy No problem and thanks for the video

[@alishettima9788]

Nice presentation, but you are little bit fast with talking. Please move slowly, so that people can follow with you along because your presentation is excellent.

[@MonsterlessonsAcademy]

Thank you for the feedback. Meanwhile you can slow down the video if it is too fast for you.

[@Its-InderjeetSinghGill]

@@MonsterlessonsAcademyNice humour 😂😂😂

[@ice-sugar.]

Spasibo