7 The React testing ecosystem

When you’ve got a top-notch mixer, instead of wasting time whisking eggs and sugar, you can focus on improving other aspects of your craft, like refining your recipes or decorating your cakes.

Similar to how superb equipment enables pastry chefs to focus on more significant aspects of their craft, frontend frameworks and libraries, like React, allow you to focus on more significant aspects of writing web applications. Instead of focusing on manipulating the DOM—removing, inserting, and updating elements yourself—you can focus on your application’s usability, accessibility, and business logic.

In this chapter, you’ll learn how to test React applications and how it relates to what you’ve learned about testing frontend applications. You’ll learn how tools like JSDOM can still be useful in different contexts, and you’ll learn concepts that will help test any other frontend frameworks you may use.

I’ve chosen to write these examples using React mainly because of its popularity. I believe it’s the tool with which most of you will already be familiar.

7.1 Setting up a test environment for React

7.1.1 Setting up a React application

7.1.2 Setting up a testing environment

7.2 An overview of React testing libraries

7.2.1 Rendering components and the DOM

7.2.2 React Testing Library

7.2.3 Enzyme

7.2.4 The React test renderer

Summary