Testing React components

Let's step back from writing code for a minute and talk about what it means to test the user interface. What exactly are we testing? We're testing the fact that our user interface renders as expected. In other words, if we tell React to render a button, we expect it to render a button—not more, not less.

Now how can we check that this is the case? One way of doing this is to write a React component, bundle our application, run it in a web browser, and see with our own eyes that it displays what we want it to display. This is manual testing and we do it at least once. But it is time consuming and unreliable in the long term.

How can we automate this process? Jest can do most of the work for us, but Jest doesn't have it's own eyes, so it will need to borrow our eyes at least once for each component. If Jest "can't see" the result of rendering a React component, then how can it even test a React component?

In Chapter 3, Creating...