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.
Learning Objectives
The objectives of this module are to provide you with an understanding of:
- How to set up the test environment
- Jest
- 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
Intended Audience
This learning path is aimed at all who wish to learn how to use the ReactJS framework.
Prerequisites
It is essential you understand the face of contemporary web development to attend this course. We insist upon JavaScript experience, along with good HTML and CSS skills.
Feedback
We welcome all feedback and suggestions - please contact us at qa.elearningadmin@qa.com to let us know what you think.
- [Instructor] Snapshot tests are useful for making sure that the UI will not change unexpectedly. An additional Facebook package needs to be added to the project via npm to help us do that. It's called react-test-renderer, and it allows us to render React components as pure JavaScript objects. The advantage of this is we don't need to render it to a DOM so that component can be tested in isolation. If we have an object, we can compare that with a previously rendered object and check that they are the same. To create a snapshot test the process is as follows: Render a UI component. To do this, the create function is use 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 render instance, which is a fully rendered component tree 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-renderer's 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 as it installs from the create react app. We can edit the app.test.js file. We've moved it into a test folder. We've left the boilerplate 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've chained test with skip, so this test won't run. A report of how many tests we've skipped will be shown on the console line. Skip can be used on any described it or tesco. We've imported the create function from react-test-renderer. That's a package we've added to the project. There's a test feed on line 12, and it's populated with an exe spec. The callback of this spec creates a testing sense of the app component and immediately converts it to JSON. We then assert that 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.test.js snap file it's been created. And looking inside that, shows that it's just a text file with the mark up we'd expect. If we press it on the console, it runs the test 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. I've replaced the snapshot because we want to keep the updated vendor of the app component. We can do this by pressing U on the console, or the other option is to change the app component back to what it was. We'll do that. The test run again, and you can see that they pass. So, for static components that have no props in those 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.
Lectures
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
Ed is an Outstanding Trainer in Software Development, with a passion for technology and its uses and holding more than 10 years’ experience.
Previous roles have included being a Delivery Manager, Trainer, ICT teacher, and Head of Department. Ed continues to develop existing and new courses, primarily in web design using: PHP, JavaScript, HTML, CSS, SQL, and OOP (Java), Programming Foundations (Python), and DevOps (Git, CI/CD, etc). Ed describes himself as practically minded, a quick learner, and a problem solver who pays great attention to detail.
Ed’s specialist area is training in Emerging Technologies, within Web Development. Ed mainly delivers courses in JavaScript covering vanilla JS, ES2015+, TypeScript, Angular, and React (the latter is authored by Ed) and has delivered on behalf of Google for PWAs. Ed has also developed a new suite of PHP courses and has extensive experience with HTML/CSS and MySQL.
Ed is responsible for delivering QA’s Programming Foundations course using the Eclipse IDE. His skillset extends into the DevOps sphere, where he is able to deliver courses based around Agile/Scrum practices, version control, and CI/CD.