- [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