Chapter 4
Test Your React Components

Manually navigating through a large application to check that everything works is too time consuming. It’s better to test parts of the application with automated tests.

When the UI makes a substantial part of the application, it’s difficult to create automated tests that not only inform you of errors but also require reasonably little code.

One option would be to use a browser automation library to navigate through your application, but this sort of test tends to fail in ways that are difficult to interpret. It also takes a long time to set up, so it’s only useful for testing at a high level. It also doesn’t require any React-specific knowledge, so I encourage you to refer to other books or resources to learn more about it. If you’re interested in end-to-end testing in JavaScript, take a look at Nightwatch.js.^[14] The Way of the Web Tester, also published by the Pragmatic Bookshelf, is a good guide to all the different ways to test a web application.

Instead of browser automation, we’ll test React applications without starting a browser. You’ll set up a test framework for the word counter and then test the plain functions that contain the application logic. You’ll then test the render output of a single component and verify the interaction of a parent component with its children. Each of these techniques tests an isolated slice of your application, making the tests faster to write and to run. And they’ll be more informative when they fail.