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.
If we have stating components, we don't need to test whether the set function works as this is the concern of the core React code. What we are interested in is if a component's state changes, fired by a user event and if that event causes the component to re-render with the correct volume. Tests usually follow the pattern of arrange, act, assert. In Snapshot tests, we don't perform an act part of the test as there are no moving parts. If we have events that cause side effects, like setting state, then we should test that the function attached to the event produces the output we expect. This is particularly useful when testing controlled components in forms.
We can render the forms component and check that the initial value is what is initially set in state. We can then fire the event, say an unchange, with the value we wish to change it to. Then we assert that the value of the input is what we changed it to. This will check that the event fired, state was set, and the element re-rendered with the new control value. To help us here, we need a function that will actually trigger the event. This is done by the act function. There are several versions of this function provided by the different testing packages that essentially do the same thing. But it's crucial that you have the correct one imported. That's usually down to importing the app function from the same packages that the rendering function comes from.
The act function has a call-back as an argument, and this will trigger whatever you need to on whatever test instance you were testing. Again, the mechanism for actually making the event happen differs depending on the test package you are using. You can then assert on the value being tested. This pattern can be followed for any interaction within a component. The form component shown on the right of the screen is a simple form that has a label for name and a text input for the user to enter into. State has been declared to hold the value of name. The input calls on change and updates the state. The value of the input is controlled by the state.
To test this, we've created a form test file shown on the left of the screen. We use React test renderer's create function to render the tree. We then access the root, which will be the form, and then find the input with the name of name. We assert to verify the initial state of the value, setting the component as an empty string. React test renderer's act function is then called. It takes a call-back, which acts on change prop of the input and sets the target's object value to test name. The act function is wrapping the unchange, so the call-back finishes executing before we move on. When the act function completes, we assert that the value of the input we're testing has been changed to the value we supplied. If we run the test, we can see that it passes. We would repeat this for any other fields on the form, and we could also use this to test any user interactions that produce other events.
Introduction to Testing React with Jest - How to set up the Test Environment - Jest - The What and How of Testing in React - Snapshot Testing - Testing Components with Props - Mocking Components for Testing - Mocking Functions - Testing Components Asynchronously - Testing Components with Routing - Testing Custom Hooks