Chapter 3
Testing React with Enzyme

JavaScript web development can be divided into two eras: pre-React and post-React. Pre-React, all was chaos. Suppose you wanted to make a button toggle a popup when clicked: you’d add code somewhere—nowhere near the button markup—to add an event listener for the button click. The event listener you’d write would directly alter the DOM to show or hide the popup. Code was scattered without rhyme or reason. Unit tests were almost unheard of.

Thankfully, we live in the age of React. Now individual pieces of the app—the button and the popover, in this example—can be isolated as components. The DOM tree they render is a pure function of their props (React parlance for data provided to the component) and their internal state. And that purity makes them a breeze to test.

In this chapter, you’ll use a test-driven approach to build a complex component one piece at a time. You’ll use the Babel compiler to incorporate React’s powerful JSX syntax into your tests. You’ll combine the speed of Jest with the ease of Enzyme, a harness that lets you test individual React components in isolation. Along the way, you’ll take advantage of the tools introduced in the previous chapter, applying them to a cutting-edge React stack.