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.
Routing testing is not done often, as the package is extensively tested by its creators. Issues arrive when you have components that use router components such as link or route as part of their rendering. They use context and more produced testing errors if not dealt with properly, especially if they use router features outside general navigation. For example, a link that expands a list inside a component.
It may be tempting to stop the components yourself to get around this, but the creators of react-router-dom suggest surrounding your unit test in a router component. The most appropriate is the memory router, as you're able to reset the router between tests. The memory router allows you to put an app at any location using the initial entries and initial index props.
Navigation and checking locations doesn't really need to be tested either, but there's some information about testing these in the router documentation and React testing library documentation, if you really feel you have to do this. With that said, there's nothing else really to show you here. Testing snapshots and component outputs that render routing components can be done without the need to mock or stop the router components, or indeed, surround your test in a router. They're not included in the snapshots made, and don't generally affect all the tests.
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 - Testing State Events Interactions - Mocking Functions - Testing Components Asynchronously - Testing Custom Hooks