8 Testing React applications

 

This chapter covers

  • How to test components that interact with each other
  • Snapshot testing
  • Testing component’s styles
  • Stories and component-level acceptance testing

After finding their way around a professional kitchen and learning a trick or two with the pastry bag, at some point, a pâtissier must crack a few eggs, prepare a bit of dough, and do some real baking.

In this chapter, we’ll take a similar approach to testing React applications. Now that you’ve learned your way around the React testing ecosystem and understood its tools’ roles, we’ll dig deeper into how to write effective, robust, and maintainable tests for your React applications.

To learn how to write these kinds of tests, you’ll extend the application you’ve built in the previous chapter and learn how to use advanced techniques to test it.

First, you’ll learn, at multiple levels of isolation, how to validate components that interact with each other. Throughout the process, I’ll explain how to do it in a comprehensible and maintainable way. For that, you’ll learn how to stub components, how these stubs impact your tests, and how to apply the testing pyramid concept when testing React applications.

8.1 Testing component integration

8.1.1 Stubbing components

8.2 Snapshot testing

8.2.1 Snapshots beyond components

8.2.2 Serializers

8.3 Testing styles

8.4 Component-level acceptance tests and component stories

8.4.1 Writing stories

8.4.2 Writing documentation

Summary