Testing React with Jest and Testing Library

7h 41m 32s
English
Paid
July 1, 2024

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.

More

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 Testing React with Jest and Testing Library

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

Similar courses to Testing React with Jest and Testing Library

React Simplified - Advanced

React Simplified - Advancedwebdevsimplified.com

Duration 11 hours 29 minutes 50 seconds
Build a Spotify Connected App

Build a Spotify Connected Appfullstack.io

Duration 3 hours 47 minutes 28 seconds
Scale React Development with Nx

Scale React Development with Nxegghead

Duration 1 hour 34 minutes 10 seconds
Next.js - The Full Course

Next.js - The Full Coursefireship.io

Duration 1 hour 14 minutes 14 seconds
React, NextJS and NestJS: A Rapid Guide - Advanced

React, NextJS and NestJS: A Rapid Guide - Advancedudemy

Duration 8 hours 40 minutes 51 seconds
React and NestJS: A Practical Guide with Docker

React and NestJS: A Practical Guide with Dockerudemy

Duration 6 hours 54 minutes 20 seconds
Full Stack HATEOAS: Spring Boot 2.1, ReactJS, Redux

Full Stack HATEOAS: Spring Boot 2.1, ReactJS, Reduxudemy

Duration 5 hours 51 minutes 37 seconds