A snapshot test is one where Jest compares all the elements and attributes in a rendered component to a previous snapshot of the rendered component. If there are no differences, then the test passes.

We are going to add a test to verify the ContactUs component renders OK, by checking the DOM nodes using a Jest snapshot test:

1. We'll create a test with the title Renders okay in the ContactUs group of tests, rendering the component in the same way as previously:

describe("ContactUs", () => {
  ...
  test("Renders okay", () => {
    const handleSubmit = async (): Promise<ISubmitResult> => {
      return {
        success: true
      };
    };
    const { container } = render(<ContactUs onSubmit={handleSubmit} />);
    
    // TODO - do the snapshot test
  });
});

2. We can now add the line to carry out the snapshot test:

test("Renders okay", () => {
  const handleSubmit = async (): Promise<ISubmitResult> => {
    return {
      success: true
    };
  };
  const { container } = render(<ContactUs onSubmit={handleSubmit} />);

  expect(container).toMatchSnapshot();
});

Doing a snapshot test is pretty simple. We pass the DOM node we want to compare into Jest's expect function, and then chain the toMatchSnapshot function after it.

When the test runs, we'll get confirmation that the snapshot has been written in the terminal, as follows:

3. If we look at our src folder, we'll see it now contains a __snapshots__ folder. If we look in this folder, we'll see a file called ContactUs.test.tsx.snap. Opening the file, we'll see the following content:

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`ContactUs Renders okay 1`] = `
<div>
  <form
    class="form"
    novalidate=""
  >
    <div
      class="form-group"
    >
      <label
        for="name"
      >
        Your name
      </label>
      <input
        id="name"
        type="text"
        value=""
      />
    </div>
    ...
  </form>
</div>
`;

Some of the content is stripped out in this snippet, but we get the gist: we have a copy of every DOM node including their attributes from the container element we passed into the toMatchSnapshot function.

This test is heavily coupled to our implementation, though. So, any change to our DOM structure or attributes will break our test.

4. As an example, let's add a div tag inside our Form component in Form.tsx:

<form ...>
  <div>{this.props.children}</div>
  ...
</form>

When the test runs, we'll see confirmation that our test has broken. Jest does a great job of showing us the difference in the terminal:

5. We are happy that this is a valid change, so we can press U to let Jest update the snapshot:

So, are snapshot tests a good thing or a bad thing? They are volatile because they are tightly coupled to the implementation of a component. However they are super-easy to create, and when they do break, Jest does a great job of highlighting the problem area and allowing us to efficiently correct the test snapshot. They are well worth a try to see if your team gains value from them.

We have learned a lot already in this chapter about unit testing React and TypeScript apps. Next up, we'll learn how we can mock dependencies.