6 Testing React applications

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.

Similarly to how superb equipment enables pastry chefs to focus on more significant aspects of their craft, front-end 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 front-end applications. You’ll learn how tools like JSDOM can still be useful in different contexts, and learn concepts which will help test any other front-end 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 my readers will already be familiar.

6.1 Setting up a test environment for React

6.1.1 Setting up a React application

6.1.2 Setting up a testing environment

6.2 An overview of React testing libraries

6.2.1 Rendering components and the DOM

6.2.2 React Testing Library

6.2.3 Enzyme

6.2.4 React Test Renderer

6.3 Testing component interaction

6.3.1 Stubbing components

6.4 Snapshot testing

6.4.1 Snapshots beyond components

6.4.2 Serializers

6.5 Testing styles

6.6 Component-level acceptance tests and component stories

6.6.1 Writing stories

6.6.2 Writing documentation

6.7 Summary