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

[@devyadav0399]

Really helpful, keep up the good work!

[@MonsterlessonsAcademy]

Wil do!

[@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...

[@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

[@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

[@thaifred]

How to test ({children}) prop?

[@MonsterlessonsAcademy]

Mock child and test what comes to mock

[@thaifred]

@@MonsterlessonsAcademy Like this? Or should i wrap the children instead of send it like a prop like i do?
import { render, screen } from "@testing-library/react";
import DangerZone from "../../../src/components/DangerZone";
describe("DangerZone", () => {
it("should render children when children prop is provided", () => {
render();
expect(screen.getByText(/children/i)).toBeInTheDocument();
});
it("should not render children when children prop is not provided", () => {
render();
expect(screen.queryByText(/children/i)).toBeNull();
});
});

[@thaifred]

@@MonsterlessonsAcademy Like this? it("should render children when children prop is provided", () => {
render();
expect(screen.getByText(/children/i)).toBeInTheDocument();
});
it("should not render children when children prop is not provided", () => {
render();
expect(screen.queryByText(/children/i)).toBeNull();
});
or should i wrap the children render({children});

[@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