Using Jest snapshot tests

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: