Use Snapshot Testing

To test the render output of a specific component, we can use snapshot testing.

First we will create a file called FaqItem.test.js. We will also delete the App.test.js file, because we have deleted all the initial content of App.js and tests refer to those. Here we will render the component and assert the markup.

import React from "react";
import { render } from "@testing-library/react";

import FaqItem from "./FaqItem";

describe("FaqItem", () => {
  it("renders a FAQ item", () => {
    const component = render(
      <FaqItem
        question="What is the answer to life the universe and everything?"
        answer="42"
      />
    );
    expect(component).toMatchSnapshot();
  });
});

To run our tests we will run the command:

yarn test

This will output our test results:

PASS  src/components/FaqItem.test.js

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   1 passed, 1 total
Time:        0.538s
Ran all test suites related to changed files.