Mantra: Test One Piece at a Time

There are two schools of thought on unit testing. One is that the tests should be as realistic as possible. In this view, tests against one component should depend on the behavior not only of that one component, but also of its dependencies. The other school of thought, the one applied in this book, is that tests should describe the behavior of their target in isolation, not the behavior within a complete system. To test the complete system, you must test each part on its own. This requires diligence and thoroughness, but the reward is that changes to a single component can only fail that component’s tests, rather than a perplexing cascade of failures. That’s why this chapter’s mantra is: “Test one piece at a time.”

You’ve seen how testing in isolation can be achieved in React using Enzyme’s shallow() method: changes to any one of the three components you created can only fail the tests for that particular component. Conversely, writing a test doesn’t require you to think about the behavior of anything but the component being tested. Look at the component and its tests side-by-side, and you can see a direct correspondence. This is the cardinal advantage of shallow testing over testing against the complete DOM tree generated by the component, the approach favored by react-testing-library.

Now to recap. In this chapter, you learned how Babel makes it possible to write React code with the succinct JSX syntax. You set up ESLint to preemptively warn you about common React mistakes. Finally, you built a React carousel the TDD way, writing tests with Jest and Enzyme for each piece of functionality you added. In the next chapter, you’ll add a much-needed coat of paint with styled-components, a unit-testable alternative to conventional stylesheets. And you’ll use webpack to build your project for the browser so that you can see your carousel in action.