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.
React is for taking data and displaying it, so we should test any part of our application that takes data and renders it. There are two ways we can do this. Render a component tree in a test environment and assert on its output, or run end-to-end tests which as we've already mentioned, is not really concerned with React components. But what should we test? According to test guru, Kent C. Dodds, the more your tests resemble the way your software is used, the more confidence they can give you.
A good rule of thumb is that you should test anything that does not duplicate the exact application code in the test. It's not a responsibility of, or covered by other tests. Meaning other libraries will react to core implementation. Or if has detail that is important to outsiders. Meaning, can the effect of an API internal detail be described using only the component's public API? With this in mind, we should be trying to write tests that check the output of our components rather than how they get to the output. The main reason for that is if you refactor your component, and you test its implementation, the test will almost certainly break, even if the component produces the required outcome.
There are a few strategies that I use to test React apps and some or all of them can be used. The first is for components that don't often change in your application. The best way to test the component like this is to make a representation of the DOM it creates and then check that it repeats this representation on testing. This is called Snapshot testing. And we'll look into that first when go more in depth into testing soon.
The next strategy is to render an initial component, perform some interaction with it, and then check to see if the re-rendered results in the output we expected. There are a few ways in which that can be done, but we'll check out Facebook's recommendation for this. To preserve the unique nature of components we need to understand how we can test those that have dependencies on others, And those that may render other components. To be able to do this effectively, we need to know about mocking strategies for other components and functions that we may import.
Routing is an interesting area for testing. We use components from the React router DOM and this is extensively tested so there's so little need to test routing. However, there are some things we should test when routing, so it'd be wrong not to discuss them. We've introduced hooks into our applications, and some of them are built in. There's no need to test the actual hook, but if the hook affects our component, we should check it behaves as expected. The flip to that is the custom hooks we may have made. Like when we covered state management with a context and reducers.
The last part of our testing journey will be to test these hooks.
Introduction to Testing React with Jest - How to set up the Test Environment - Jest - 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