React has great tools for Unit Testing component. This doesn’t mean testing is easy. There are still a lot of questions you have to figure out for yourself: How many component tests should you write vs end-to-end tests or lower-level unit tests? How can you test a certain line of code that is tricky to test? And what in the world are you supposed to do about that persistent act() warning?

In this workshop we’ll introduce Unit Testing with React, along with a mental model for how to think about designing your components and tests. This mental model will help you see how to test each bit of logic, whether or not to mock dependencies, and will help improve the design of your components. You’ll walk away with the tools, techniques, and principles you need to implement low-cost, high-value component tests.

Table of contents

- The different kinds of React application tests, and where component tests fit in.
- A mental model for thinking about the inputs and outputs of the components you test.
- Options for selecting DOM elements to verify and interact with them.
- The value of mocks and why they shouldn’t be avoided.
- The challenges with asynchrony in RTL tests and how to handle them.

Prerequisites

- Familiarity with building applications with React.
- Basic experience writing automated tests with Jest or another unit testing framework.