Chapter 4. Optimizing Test-Driven React Development

Perhaps, one of the most important tools in the React ecosystem is Jest—a test runner and unit test library for testing your React components. Jest was designed to overcome challenges faced with other test frameworks like Jasmine, and was created with React development in mind. With powerful testing tools like Jest, you're better equipped to let your unit tests influence the design of your React components. In this chapter, you'll learn:

• The overarching design philosophy of Jest and what this means for React developers
• Running Jest unit tests in a create-react-app environment and in a standalone React environment
• Writing effective unit tests and suites using the Jest API
• Running Jest unit tests in your code editor and integrating tests into your development server

The driving philosophy of Jest

In the previous chapter, you learned that the create-react-app tool was created to make developing React applications easier. It does so by eliminating upfront configuration—you go straight to building components. Jest was created with the same purpose in mind, eliminating the upfront boilerplate that you would typically have to create just to start writing tests. In addition to removing the initial unit test configuration factor, Jest has some other tricks up its sleeve. Let's go over some of the driving principles of testing with Jest.

Mock everything except the application code

The last thing you want to spend time on is testing someone else's code. Yet, sometimes you're forced to do exactly that. For example, let's say that you want to test a function that makes a fetch() call to some HTTP API. Another example: your React component uses some library to help set and manipulate its state.

In both of these examples, there's code that you didn't implement that...

Running tests

The Jest command-line tools are all you need to run your unit tests. There are a number of ways that the tool can be used. First, you'll learn how to invoke the test runner from a create-react-app environment and how to use the interactive watch mode options. Then, you'll learn how to run Jest in a standalone environment without the help of create-react-app.

Running tests using react-scripts

When you create your React application using create-react-app, you're ready to run tests right away. In fact, as part of the boilerplate code that's created for you, a unit test for the App component is created. This test is added so that Jest will find a test that it can run. It doesn't actually test anything meaningful in your application, so you'll probably delete it once more tests are added.

Additionally, create-react-app adds the appropriate script to your package.json file to run your tests. You can just run the following command in your Terminal:

npm test

This will actually invoke the...

Writing Jest tests

Now that you know how to run Jest, let's write some unit tests. We'll cover the basics as well as the more advanced features of Jest available for testing React apps. We'll start organizing your tests into suites and the basic assertions available in Jest. Then, you'll create your first mock module and work with asynchronous code. Lastly, we'll use Jest's snapshotting mechanism to help test React component output.

Organizing tests using suites

Suites are the main organizational unit of your tests. Suites aren't a Jest requirement—the test that create-react-app creates does not include a suite:

it('renders without crashing', () => { 
  ... 
}); 

The it() function declares a unit test that passes or fails. When you're just getting your project started and you only have a few tests, there's no need for suites. Once you have several tests, it's time to start thinking about organization. Think of a suite as a container that you can put your tests in. You can have several of...

Summary

In this chapter, you learned about Jest. You learned that the key driving principles of Jest are creating effective mocks, test isolation and parallel execution, and ease of use. You then learned that react-scripts makes running your unit tests even easier by providing some basic configuration to use with Jest.

When running Jest, you saw that watch mode is the default when running Jest via react-scripts. Watch mode is especially useful when you have lots of tests that don't need to run every time you make a source change—only relevant tests are executed.

Next, you performed some basic assertions in your unit tests. Then, you created a mock for the fs module and performed assertions on the mocked functions to ensure that they're being used as expected. You then evolved these tests to make use of the inherent asynchronous capabilities of Jest. Unit test coverage reporting is built into Jest, and you learned how to view this report by passing an additional argument.

In the next chapter...