The course is part of this learning path
This module looks at testing in React. You’ll learn how to set up a test environment, Jest, and other useful tools to test your React App.
The objectives of this module are to provide you with an understanding of:
- How to set up the test environment
- Snapshot testing
- How to test with Props
- How to mock components for testing
- Mock functions
- How to test components asynchronously
- How to test components with routing
- How to test custom hooks
This learning path is aimed at all who wish to learn how to use the ReactJS framework.
We welcome all feedback and suggestions - please contact us at email@example.com to let us know what you think.
To create a snapshot test, the process is as follows. Render a UI component. To do this, the create function is used from react-test-renderer. The create function takes an argument of a react component complete with any props. It doesn't use a real DOM, it returns a test renderer instance which is a fully-rendered component entry as an object, that assertions can be made against.
Next we take a snapshot. React will automatically create a snapshot. On the first run, the snapshot file will be created and stored for future comparisons. In the code, the test-renderer instance will be converted to JSON using react test renderers to JSON function. Then we compare snapshots to reference snapshots. On subsequent test runs, the object created will be compared to the stored snapshot. The test should assert that the two are the same. The test will fail if the snapshots don't match.
A snapshot may not match because the change was truly unexpected, or if the snapshot has become out of date, due to actual changes in the react component. Jest to match snapshot matcher, is used for this assertion. We take the React app installed from the Create react app. We can edit the app talk test on JS file. We've moved it into a tests folder. We've left the Burma template test in the test file. It uses another recommended testing utility, called React Testing Library.
We'll come back and leverage some of its power later. But for now, let's focus on the snapshot test. Just to note, we chained test with skip. So this test won't run. A report of how many tests escape will be shown in the console line. A skip can be used on any describe it or test call. We've imported the Create function from react-test-renderer. That's a package we've added to the project. There's a test free on line 12. And it's populated with an eight spec. The callback of this spec, creates a test instance of the app component and immediately converts it to JSON. We then assert the snapshot created by the test, will match the snapshot stored.
When we start the test for the first time, you can see that all of the tests pass, apart from our skipped one and we have a snapshot written. Looking at the folder structure, we can see a snapshot's file has been added. And inside this is the app talk test on JS, snap file it's been created. And looking inside that, shows that it's just a text file, with the markup we'd expect. It if we press A on the console, it runs the tests again. You can see that the test passes now. If we go to the app component, and edit the text on line 19, and save this file, the test automatically runs again, and the test now fails.
Our snapshot test has failed, because the outputted object does not match the previously saved snapshot object. We now have two options. Either replace the snapshot, because we want to keep the updated render of the app component. We can do this by pressing new On the console, or the other option is to change, the app component back to what it was. We'll do that. The tests run again, and you can see that they pass.
So, for static components, that have no props and no state, snapshot testing is good for doing what Ken said, using our component in a way that will be used in the app, simply by rendering it.
Introduction to Testing React with Jest - How to set up the Test Environment - Jest - The What and How of Testing in React - Testing Components with Props - Mocking Components for Testing - Testing State Events Interactions - Mocking Functions - Testing Components Asynchronously - Testing Components with Routing - Testing Custom Hooks