Modern JavaScript Web Development Cookbook

How to do it...

We can use snapshot testing for all of our components, but it's more interesting for those whose output varies in terms of their props, so different behaviors are to be expected. We will be using a different way of rendering: instead of producing HTML elements, we'll use renderers that produce text output that can be stored and compared in a easy way.

First, the simplest cases are for components with a standard, fixed kind of output. We have some examples of that: for our <ClicksDisplay> component, the test would be written as follows:

// Source file: src/counterApp/clicksDisplay.test.jsimport React from "react";import TestRenderer from "react-test-renderer";import { ClicksDisplay } from "./";describe("clicksDisplay", () => ...