Testing React with Jest and Testing Library

7h 41m 32s
English
Paid

React Testing Library has become an extremely popular option for testing React applications, and with good reason! This comprehensive course provides a solid foundation for creating robust tests for React apps.

Embracing Best Practices

React Testing Library advocates certain testing best practices, focusing on enhancing code quality and maintainability. This course covers these key practices:

  • Emphasizing testing behavior over implementation.

  • Creating tests that interact with your app just like a real user would.

  • Identifying elements using accessibility handles to ensure your code is as accessible as possible.

Diverse Testing Examples

The course begins with straightforward examples, such as changing a button's color on click. As you progress, you'll encounter more advanced testing concepts, including:

  • Testing asynchronous page changes.

  • Simulating server data using Mock Service Worker.

  • Using context providers when rendering components.

Concepts are introduced gradually, supporting your learning journey and ensuring your mastery of advanced testing strategies.

Hands-On Skill Practice

Gain practical experience with numerous opportunities to apply your skills throughout the course. Engage in "code quizzes" while developing course projects, allowing you to practice and then verify your solutions through video explanations. The optional final section offers additional exercises to complete the second app, reinforcing the course’s concepts.

Optional React Lectures

All significant React code presented in the course is available in separate lectures. You have the option to reinforce your React skills by viewing these lectures or skipping them if you already feel confident in your React abilities.

About the Author: udemy

udemy thumbnail
By connecting students all over the world to the best instructors, Udemy is helping individuals reach their goals and pursue their dreams. Udemy is the leading global marketplace for teaching and learning, connecting millions of students to the skills they need to succeed. Udemy helps organizations of all kinds prepare for the ever-evolving future of work. Our curated collection of top-rated business and technical courses gives companies, governments, and nonprofits the power to develop in-house expertise and satisfy employees’ hunger for learning and development.

Watch Online 82 lessons

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 82 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: Introduction to Testing Library and Jest
All Course Lessons (82)
#Lesson TitleDurationAccess
1
Introduction to Testing Library and Jest Demo
04:07
2
Create-React-App
02:18
3
First Test with Testing Library
06:31
4
Jest and Jest-DOM Assertions
04:12
5
Jest: Watch Mode and How Tests Work
07:40
6
TDD: Test Driven Development
03:29
7
React Testing Library Philosophy
04:30
8
Functional Testing vs Unit Testing
04:21
9
TDD (Test Driven Development) vs BDD (Behavior Driven Development)
01:28
10
Testing Library and Accessibility
06:47
11
Overall Course Plan
03:24
12
Start Color Button App
10:57
13
Test that Finds Button by Role and Clicks Button
07:44
14
OPTIONAL React Code: Click Button to Change Color
06:29
15
Manual Acceptance Testing
01:22
16
Test Initial Condition of Button and Checkbox
06:07
17
Introduction to Code Quizzes
03:36
18
Code Quiz! Confirm Button Disable on Checkbox Check
02:32
19
Code Quiz Solution: Confirm Button Disable on Checkbox Check
03:36
20
Finding Checkbox with Label
03:28
21
Code Quiz! Disabled Button Turns Gray
03:26
22
Unit Testing Functions
08:52
23
Code Quiz! Update Tests for New Color Names
02:45
24
When to Unit Test
02:12
25
Review: Simple App
01:36
26
ESLint and Prettier
03:50
27
ESLint for Testing Library and Jest-DOM
03:54
28
Configure ESLint in VSCode
07:02
29
Configure Prettier in VSCode
01:42
30
Review: ESLint and Prettier
01:22
31
Introduction to Sundaes on Demand
08:42
32
ESLint and Prettier Setup
05:02
33
React Bootstrap Setup
03:34
34
Code Organization and Introduction to SummaryForm
04:58
35
Code Quiz: Checkbox Enables Button
05:41
36
OPTIONAL React Code: SummaryForm Checkbox and Button
02:16
37
React Bootstrap Popover and Testing Library userEvent
06:31
38
Screen Query Methods
05:05
39
Testing Element is Not on Page: Start Popover Tests
08:59
40
OPTIONAL React Code: Popover
03:08
41
"Not wrapped in act(...)" Error, Async Disappearance
06:10
42
Review: Summary Form
02:54
43
OrderEntry Server Data Introduction
02:33
44
Introduction to Mock Service Worker and Handlers
08:47
45
Setting up the Mock Service Worker Server
03:55
46
Tests with Mock Service Worker: Scoop Options
08:38
47
OPTIONAL React Code: Options and ScoopOption Components
13:50
48
Using `await findBy` to Find Elements that Populate Asynchronously
03:16
49
Code Quiz! Topping Options from Server
07:53
50
Error Server Response Planning
03:41
51
Simulating Server Error Response in Tests
09:29
52
OPTIONAL React Code: Alert Banner for Options Server Error
07:06
53
Running only Selected Tests, and `waitFor`
06:21
54
Review: Server Error Response and Test Debugging Tools
02:15
55
Intro to Tests for Total and Subtotals
01:01
56
Entering Text Input: Subtotal Tests
10:48
57
OPTIONAL React Code: OrderDetails Context
25:13
58
OPTIONAL React Code: Use Context to Display Scoops Subtotal
16:41
59
Adding Context to Test Setup; Test Catching Error in Code
08:57
60
Creating Custom Render to Wrap in Provider By Default
07:41
61
Review: Scoops Subtotal with Context
02:04
62
Code Quiz! Toppings Subtotal
07:02
63
OPTIONAL React Code: Toppings Checkboxes
03:18
64
Code Quiz! Grand Total
11:31
65
"Unmounted Component" Error
06:25
66
What Should Functional Tests Catch? and Refactor
07:32
67
Introduction to Final Exam: Order Phases
07:05
68
Adding a New Handler: Copy/Paste Warning!
03:18
69
Debugging Tips
06:53
70
OPTIONAL React Hints for Order Phase Coding
04:07
71
Final Exam Solution
04:44
72
OPTIONAL React Code: Order Phases
06:47
73
Jest Mock Functions as Props
04:41
74
Review: Final Exam, and Introduction to Optional Practice
04:05
75
Standard Questions for New Tests and Introduction to Exercises
06:38
76
Confirm "Loading" Text
03:28
77
Conditional Toppings Section on Summary Page
04:06
78
Disable Order Button if No Scoops Ordered
03:50
79
Red Input Box for Invalid Scoop Count
10:40
80
No Scoops Subtotal Update for Invalid Scoop Count
04:13
81
Server Error on Order Confirmation Page
05:48
82
Congratulations and Thank You!
00:53
Unlock unlimited learning

Get instant access to all 81 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription