Testing React with Jest and React Testing Library (RTL)
- Descripción
- Currículum
- Reseñas
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.
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.
Supportive Instructor
The instructor has a proven track record of responding to course Q&A in a helpful and supportive way. She loves to engage with students, answer questions about course concepts, and help debug students’ code for the course projects.
-
1Introduction to Testing Library and JestVideo lesson
-
2Create-React-AppVideo lesson
-
3First Test with Testing LibraryVideo lesson
-
4Jest and Jest-DOM AssertionsVideo lesson
-
5Jest: Watch Mode and How Tests WorkVideo lesson
-
6TDD: Test Driven DevelopmentVideo lesson
-
7React Testing Library PhilosophyVideo lesson
-
8Functional Testing vs Unit TestingVideo lesson
-
9TDD (Test Driven Development) vs BDD (Behavior Driven Development)Video lesson
-
10Testing Library and AccessibilityVideo lesson
-
11RESOURCE: Where to find code if you'd rather not write React for this courseText lesson
-
12TROUBLESHOOTING: Errors from Node 17 and aboveText lesson
-
13Overall Course PlanVideo lesson
-
14Start Color Button AppVideo lesson
-
15JEST-DOM BUG! False positives with camelCase `toHaveStyles`Text lesson
-
16`logRoles` method for debugging rolesVideo lesson
-
17Test Behavior when Clicking ButtonVideo lesson
-
18OPTIONAL React Code: Click Button to Change ColorVideo lesson
-
19Manual Acceptance TestingVideo lesson
-
20Test Initial Condition of Button and CheckboxVideo lesson
-
21OPTIONAL: Testing styles from imported CSS modulesText lesson
-
22Introduction to Code QuizzesVideo lesson
-
23Code Quiz! Confirm Button Disable on Checkbox CheckVideo lesson
-
24Code Quiz Solution: Confirm Button Disable on Checkbox CheckVideo lesson
-
25Finding Checkbox with LabelVideo lesson
-
26Code Quiz! Disabled Button Turns GrayVideo lesson
-
27Unit Testing FunctionsVideo lesson
-
28Code Quiz! Update Tests for New Color NamesVideo lesson
-
29When to Unit TestVideo lesson
-
30Review: Simple AppVideo lesson
-
31ESLint and PrettierVideo lesson
-
32ESLint for Testing Library and Jest-DOMVideo lesson
-
33Instructions for displaying ESLint in the status bar for ESLint extension 2.4.0+Text lesson
-
34Configure ESLint in VSCodeVideo lesson
-
35Configure Prettier in VSCodeVideo lesson
-
36Review: ESLint and PrettierVideo lesson
-
37Introduction to Sundaes on DemandVideo lesson
-
38ESLint and Prettier SetupVideo lesson
-
39React Bootstrap SetupVideo lesson
-
40Code Organization and Introduction to SummaryFormVideo lesson
-
41Code Quiz: Checkbox Enables ButtonVideo lesson
-
42OPTIONAL React Code: SummaryForm Checkbox and ButtonVideo lesson
-
43React Bootstrap Popover and Testing Library userEventVideo lesson
-
44IMPORTANT, PLEASE READ!: code update required to avoid errorsText lesson
-
45Replace `fireEvent` with `userEvent`Video lesson
-
46Screen Query MethodsVideo lesson
-
47Testing Element is Not on Page: Popover TestsVideo lesson
-
48OPTIONAL React Code: PopoverVideo lesson
-
49Review: Summary FormVideo lesson
-
50OrderEntry Server Data IntroductionVideo lesson
-
51Introduction to Mock Service Worker and HandlersVideo lesson
-
52Why not mock axios using Jest?Text lesson
-
53Setting up the Mock Service Worker ServerVideo lesson
-
54Tests with Mock Service Worker: Scoop OptionsVideo lesson
-
55IMPORTANT, PLEASE READ: axios issue with 1.xText lesson
-
56OPTIONAL React Code: Options and ScoopOption ComponentsVideo lesson
-
57Using `await findBy` to Find Elements that Populate AsynchronouslyVideo lesson
-
58Code Quiz! Topping Options from ServerVideo lesson
-
59TROUBLESHOOTING: `Unable to find role="img"` errorText lesson
-
60Error Server Response PlanningVideo lesson
-
61Simulating Server Error Response in TestsVideo lesson
-
62OPTIONAL React Code: Alert Banner for Options Server ErrorVideo lesson
-
63Running only Selected Tests, and `waitFor`Video lesson
-
64TROUBLESHOOTING: Tests passing but getting warnings / errors?Text lesson
-
65OPTIONAL: Frequent Question: Why doesn't "name" work with the role "alert"?Text lesson
-
66Review: Server Error Response and Test Debugging ToolsVideo lesson
-
67Intro to Tests for Total and SubtotalsVideo lesson
-
68Entering Text Input: Subtotal TestsVideo lesson
-
69OPTIONAL React Code: OrderDetails ContextVideo lesson
-
70OPTIONAL React Code: Use Context to Display Scoops SubtotalVideo lesson
-
71Adding Context to Test SetupVideo lesson
-
72TROUBLESHOOTING: "not wrapped in act(...)" error during next lectureText lesson
-
73Creating Custom Render to Wrap in Provider By DefaultVideo lesson
-
74Review: Scoops Subtotal with ContextVideo lesson
-
75Code Quiz! Toppings SubtotalVideo lesson
-
76OPTIONAL React Code: Toppings CheckboxesVideo lesson
-
77Note on equivalent error strings for next lectureText lesson
-
78Code Quiz! Grand TotalVideo lesson
-
79"Not wrapped in act()..." ErrorVideo lesson
-
80OPTIONAL: Why is the explicit unmount neededText lesson
-
81Manual Acceptance TestingVideo lesson
-
82Introduction to Final Exam: Order PhasesVideo lesson
-
83Adding a New Handler: Copy/Paste Warning!Video lesson
-
84Debugging TipsVideo lesson
-
85OPTIONAL React Hints for Order Phase CodingVideo lesson
-
86Final Exam SolutionVideo lesson
-
87TROUBLESHOOTING: "loading" test failsText lesson
-
88OPTIONAL React Code: Order PhasesVideo lesson
-
89Jest Mock Functions as PropsVideo lesson
-
90Review: Final Exam, and Introduction to Optional PracticeVideo lesson
-
91Common Mistakes with React Testing LibraryText lesson
