Testing React with Jest and Testing Library

7h 41m 32s
English
Paid

Course description

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

Read more about the course

Best Practices

React Testing Library is famously opinionated about testing best practices, and is written to encourage these best practices. This course teaches:

  • testing behavior over testing implementation

  • tests that interact with your app the way a user would

  • finding elements by accessibility handles, to make sure your code is accessible as possible

Broad range of testing examples

The course apps start very with very simple examples (clicking a button to change its color) and work up to progressively more complicated testing concepts, such as: 

  • testing asynchronous page changes

  • simulating data from a server using Mock Service Worker

  • applying a context provider to a component when rendering

The course builds up to complex concepts gradually, in a way designed to support your learning and ensure your success.

Practice your new skills

You will also have plenty of opportunities to practice what you’ve learned. The course provides "code quizzes" while building the course projects, where you can apply what you learned and then watch a video to see the solution. The (optional) final section provides even more exercises to complete the second app and reinforce concepts from the course.

Optional React lectures

Any significant React code covered in the course is isolated into separate lectures. Students have a choice: those who want to reinforce their React skills (or learn new ones!) can watch those lectures, while students who feel confident in their React skills can skip them.

Watch Online

Join premium to watch
Go to premium
# Title Duration
1 Introduction to Testing Library and Jest 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

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

Crash Course: Build a Full-Stack Web App in a Weekend!

Crash Course: Build a Full-Stack Web App in a Weekend!

Sources: udemy
Do you want to learn the fundamentals of modern web development fast? Do you want to find out if building websites and apps is the right career path for you? Or maybe you just w...
12 hours 13 minutes 30 seconds
Crack the Frontend Interview with React

Crack the Frontend Interview with React

Sources: zerotomastery.io
Enhance your React skills with a project-based course that prepares you for frontend engineering interviews. Build a star rating component while mastering
1 hour 6 minutes 53 seconds
Microservices with NodeJS, React, Typescript and Kubernetes

Microservices with NodeJS, React, Typescript and Kubernetes

Sources: udemy
In building large scale applications intended for growth, microservices architecture is the go-to solution. One issue for Javascript and NodeJS learners is the
95 hours 13 minutes 4 seconds
Next.js 14 & React - The Complete Guide

Next.js 14 & React - The Complete Guide

Sources: udemy, Academind Pro
I created the bestselling Udemy course on React, now I'm super excited to share this course on NextJS with you - an in-depth course about an amazing React frame
36 hours 13 minutes 15 seconds
Mastering Next.js - 50+ Lesson Video Course on React and Next

Mastering Next.js - 50+ Lesson Video Course on React and Next

Sources: masteringnuxt.com
The premiere video course for building static and server-side rendered applications with Next.js and React. Sign up now and get two videos instantly!
5 hours 9 minutes 45 seconds