Testing React with Jest and Testing Library
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
All Course Lessons (82)
| # | Lesson Title | Duration | Access |
|---|---|---|---|
| 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 subscriptionComments
0 commentsWant to join the conversation?
Sign in to commentSimilar courses
Master Class: React + Typescript 2021 Web Development
Build a Notion Clone with React and TypeScript
Epic React (Epic React Pro)
MobX In Depth With React(Hooks+TypeScript)
