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 firstname.lastname@example.org to let us know what you think.
Jest test files usually contain a describe function. This is how a suite is defined. Suites commonly have at least one test inside them. However, test files need not contain any suites. The describe function has two arguments. The first is a string used to identify the test suite and a callback function that contains the test specs. Tests are defined using either the it or test function. There's no difference between them.
If you check out the documentation, you'll find that it is just an alias for test. They take two arguments similar to the describe function, a string to identify the test by, and a callback function that contains the steps to perform the test. The callback should have some form of assertion at the end of it, usually a call to expect. The expect function defines the actual value obtained by running the test. You can have more than one expect in a test, although this is generally discouraged as a spec should only test one feature, function, or value.
The second part of the expect call is to chain a match or function to help compare the expected result with the actual result. Jest provides a large number of common built-in matchers like toEqual. Each matcher does a Booleon comparison on the actual and expected outputs. Here's a list and a set of descriptions for some of the built-in matchers. The full list can be found in the Jest API, and there's far too many for us to go into them all. We'll explain the ones we use as we use them.
If you've looked through the built in matchers and none of them are appropriate, you can create a custom matcher as long as you follow the correct pattern. Again, the Jest documentation explains how you can create these. The testing functionality of project setup using Create React App have a code coverage tool included. The switch minus minus, minus minus coverage is used on the end of the npm test command. This generates a test report on the console, but also stores the results in a /coverage folder. This has reports in many formats.
Introduction to Testing React with Jest - How to set up the Test Environment - The What and How of Testing in React - Snapshot Testing - Testing Components with Props - Mocking Components for Testing - Testing State Events Interactions - Mocking Functions - Testing Components Asynchronously - Testing Components with Routing - Testing Custom Hooks