Advanced Testing for React with Vitest, React Testing Library, and Playwright
Babak Mehrabi, Teaching difficult things in simple way
Regardez ce cours et des milliers d'autres
Regardez ce cours et des milliers d'autres
Leçons de ce cours
-
-
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
-
-
- --
- Niveau débutant
- Niveau intermédiaire
- Niveau avancé
- Tous niveaux
Généré par la communauté
Le niveau est déterminé par l'opinion majoritaire des apprenants qui ont évalué ce cours. La recommandation de l'enseignant est affichée jusqu'à ce qu'au moins 5 réponses d'apprenants soient collectées.
1
apprenant·e
--
À propos de ce cours
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!
Projet de cours pratique
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.
Notes attribuées au cours
Pourquoi s'inscrire à Skillshare ?
Suivez des cours Skillshare Original primés
Chaque cours comprend de courtes leçons et des travaux pratiques
Votre abonnement soutient les enseignants Skillshare
Apprenez, où que vous soyez
Suivez des cours où que vous soyez avec l'application Skillshare. Suivez-les en streaming ou téléchargez-les pour les regarder dans l'avion, dans le métro ou tout autre endroit où vous aimez apprendre.
Cours apparentés
