With the Home component there are two main aspects of the component we would like to test.

1. The search input functionality at the top of the page functions the way we expect it to.

2. The premium listings section of the homepage shows the UI we expect under the different states of the GraphQL request being made (loading, error, or success).

With this in mind, the tests in the newly created Home.test.tsx file can be structured as follows:

import { Home } from "../index";

describe("Home", () => {

  describe("search input", () => {

    // ...

  });

  describe("premium listings", () => {

    // ...

  });

});

We'll begin by first preparing tests for the search input.

Testing the search input#

The very first test we can do with the search input in the Home component is verify that the input is provided an empty value when the Home component is first rendered. Though a test like this won't test any dynamic functionality, it will be a good test to begin with to help see how we can begin to instantiate our component in our test.

import { Home } from "../index";

describe("Home", () => {

  describe("search input", () => {

    it("renders an empty search input on initial render", () => {

      // ...

    });

  });

  // ...

});

The very first thing we'll want to do in our test is render the Home component. To do so, we'll import and use the render() function from React Testing Library.

import React from "react";

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

import { Home } from "../index";

describe("Home", () => {

  describe("search input", () => {

    it("renders an empty search input on initial render", () => {

      render(<Home />);

    });

  });

  // ...

});

Though the above would work in simple cases, running the test above will have our unit test fail. The primary reason to this would be due to the fact that the Home component depends on context from the Apollo client since it makes a query with a React Apollo hook (useQuery) and uses the results of the query to render certain UI. By simply rendering the Home component in our test, the rendered component has no context on any Apollo functionality.

This is where we'll need to use the MockedProvider component from Apollo React Testing. The search input is independant of the status of the query made so we won't have to concern ourselves with providing valid mock GraphQL data. Instead we'll mock the GraphQL request in the loading state since this will help make our test more concise.

With the above in mind, our test will look something like the following:

import React from "react";

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

import { MockedProvider } from "@apollo/react-testing";

import { Home } from "../index";

describe("Home", () => {

  describe("search input", () => {

    it("renders an empty search input on initial render", () => {

      render(

        <MockedProvider mocks={[]}>

          <Home />

        </MockedProvider>

      );

    });

  });

  // ...

});

Attempting to run the test above, our test will still fail. This will be due to a similar reason but now attributed to how our Home component uses components from React Router and such needs to understand the context of React Router in our test.