Advanced Testing for React with Vitest, React Testing Library, and Playwright
Babak Mehrabi, Teaching difficult things in simple way
Ve esta clase y miles más
Ve esta clase y miles más
Lecciones en esta clase
-
-
1.
Course Introduction
1:49
-
2.
Course Pre Requirements
1:27
-
3.
Why Testing Matters
3:18
-
4.
Different Types of Testing
1:35
-
5.
Testing Pyramid
1:59
-
6.
Introduction to Testing Tools for This Course
1:43
-
7.
Simple Blog Repositories and How to Run Them (Part 1)
1:50
-
8.
Simple Blog Repositories and How to Run Them (Part 2)
2:11
-
9.
Simple Blog Project Tour
2:36
-
10.
Introduction to Vitest & It's Features
2:11
-
11.
Vitest Installation
2:55
-
12.
Writing First Unit Test
3:31
-
13.
Configuring Vitest and Completing Our Unit Test
5:08
-
14.
Code Coverage Definition and Metrics
3:30
-
15.
Code Coverage vs Test Coverage
2:58
-
16.
Adding Coverage Report to Vite
2:54
-
17.
Digging Deeper in Code Coverage Report
8:11
-
18.
Adding Unit Tests for QueryKeys
6:30
-
19.
What is Mocking?
3:24
-
20.
Writing Unit Test for FetchPosts with the help of Mocking
12:47
-
21.
Writing Unit Test for usePosts
12:52
-
22.
Writing Unit Test for fetchPostById
3:32
-
23.
How CreatePost Mutation works?
5:27
-
24.
Writing Test for useCreatePost (Part 1)
8:28
-
25.
Writing Test for useCreatePost (Part 2)
6:49
-
26.
Unit Tests for useEditPost & useDeletePost
3:02
-
27.
Test Factories and Their Benefits
6:53
-
28.
Introduction to FakerJs
2:47
-
29.
Using FakerJS with Post Factory
6:35
-
30.
Unit Testing Module Summary
2:14
-
31.
Introduction to Integration Testing
1:37
-
32.
Seting Up Environment for Integration Testing
4:16
-
33.
Writing the First Integration Test
3:22
-
34.
JSDom vs Browser Environment
2:39
-
35.
Finishing the Integration Tests for PostComponent
6:35
-
36.
Code Coverage Report for PostComponent
0:52
-
37.
Writing Integration Test for Footer Component
3:33
-
38.
Writing Integration Test for Contact Page
8:52
-
39.
Writing Integration Test for About Page
1:47
-
40.
Writing Integration Test for Blog Page (Part 1)
12:59
-
41.
Writing Integration Test for Blog Page (Part 2)
14:01
-
42.
Introduction to Writing Test for the Admin Section
2:24
-
43.
Different User Event Methods and Actions
2:05
-
44.
Writing Test for the Admin Table (part 1)
10:13
-
45.
Writing Test for the Admin Table (part 2)
14:10
-
46.
Testing Edit Action Item
10:52
-
47.
Testing Delete Button (case 1)
3:47
-
48.
Testing Delete Button (case 2)
6:29
-
49.
Getting Coverage Report for Admin's ListPosts Component
2:21
-
50.
Introduction to CreatePost Section
1:57
-
51.
Looking at CreateOrEditPost Component
3:21
-
52.
Testing Rendering of Correct Form Elements
11:55
-
53.
Writing Test for Post Creation
10:47
-
54.
Testing createPost Parameters
9:08
-
55.
Analysing Code Coverage for createOrEditPost Component
2:32
-
56.
Adding Test for the API Failure Case
8:48
-
57.
Adding Test for Edition of the Post
15:41
-
58.
Adding Validation Test for Image Selection
3:21
-
59.
Integration Testing Module Summary
1:29
-
60.
Introduction to End 2 End Testing
2:08
-
61.
Installing Playwright
4:28
-
62.
Running Playwright Example Tests
4:11
-
63.
Playwright Methods and Helpers for Testing
4:05
-
64.
Writing Our First E2E Test
1:45
-
65.
Testing the Blog's Header
1:19
-
66.
Testing Click Event and Navigation between Page
8:07
-
-
- --
- Nivel principiante
- Nivel intermedio
- Nivel avanzado
- Todos los niveles
Generado por la comunidad
El nivel se determina según la opinión de la mayoría de los estudiantes que han dejado reseñas en esta clase. La recomendación del profesor o de la profesora se muestra hasta que se recopilen al menos 5 reseñas de estudiantes.
1
Estudiante
--
Proyectos
Acerca de esta clase
Master React Testing: From Vitest to Playwright – Build Rock-Solid Apps with Confidence!
Are you building modern React applications and want to ensure they’re robust, bug-free, and production-ready? Look no further! This hands-on course takes you step-by-step through the most advanced testing strategies using today's most powerful tools: Vitest, React Testing Library (RTL), and Playwright.
Whether you're a frontend developer, QA engineer, or full-stack pro, this course equips you with in-demand skills that top tech companies are actively seeking.
What You’ll Learn:
-
Why testing matters – and how it saves time and money
-
Unit, integration, and E2E testing using the modern Testing Pyramid
-
How to set up and use Vitest for lightning-fast unit testing
-
Mocking network requests and React Query using Vitest
-
Writing real-world tests for custom hooks and API logic
-
Test-driven development (TDD) with React Testing Library (RTL)
-
Code coverage: metrics that matter, and how to improve them
-
End-to-end testing React apps with Playwright
-
Efficient test architecture for real-world React projects
Tools & Technologies Used:
-
Vitest – A blazing-fast Vite-native test runner
-
React Testing Library (RTL) – For testing UI from the user’s perspective
-
Playwright – For full browser testing (E2E tests)
-
Mocking – Learn to test network and async logic with confidence
-
Code Coverage Tools – Gain insights and boost test quality
Project-Based Learning
This course is 100% practical! You'll work with a real-world blogging app repo, writing tests that mirror what you'll do in a professional setting:
-
Test fetching and mutating posts
-
Cover all edge cases
-
Master mocking strategies
-
Apply best practices for organizing test suites
Who This Course is For:
-
React developers who want to go beyond basics and write reliable, testable code
-
Engineers preparing for tech interviews or transitioning to senior roles
-
QA professionals looking to add automated frontend testing to their skillset
-
Anyone building production apps who wants confidence in their code
By the End of This Course, You Will:
-
Write unit, integration, and E2E tests like a pro
-
Understand testing from theory to real-world implementation
-
Create robust, maintainable test suites using modern tools
-
Build the confidence to refactor and scale apps safely
Enroll Now!
Start mastering testing in React today and build bulletproof apps that users (and your team) can trust. Your future self—and your next employer—will thank you.
Click Enroll Now and take your React testing skills to the next level!
Proyecto de clase práctica
A simple blog project with React and Also a server with NodeJS. This blog allow people to see some posts. Also, we have an admin section which can create a post or edit or delete them.
Valoración de la clase
¿Por qué unirse a Skillshare?
Mira las galardonadas Skillshare Originals
Cada clase tiene lecciones cortas y proyectos prácticos
Tu membresía apoya a los profesores de Skillshare
Aprende desde cualquier lugar
Ve clases sobre la marcha con la aplicación de Skillshare. Progresa en línea o descarga las clases para verlas en el avión, el metro o donde sea que aprendas mejor.
