testing-final-state-query.js

import React from "react";
// get the MockedProvider from react-apollo/test-utils
import { MockedProvider } from "react-apollo/test-utils";
import { cleanup, render } from "react-testing-library";

import UsersList, { GET_USERS_QUERY } from "./UserList";
describe("UserList component", () => {
  afterEach(cleanup);

  const request = {
    query: GET_USERS_QUERY
  };

  const result = {
    data: {
      users: [
        {
          id: "2",
          firstName: "john",
          lastName: "doe",
          email: "[email protected]",
          username: "jd"
        },
        {
          id: "4",
          firstName: "jack",
          lastName: "happer",
          email: "[email protected]",
          username: "jh"
        }
      ]
    }
  };

  it("should render the users list", async () => {
    const { getByText } = render(
      <MockedProvider mocks={[{ request, result }]} addTypename={false}>
        <UsersList />
      </MockedProvider>
    );
    // wait for the request to come back
    await new Promise(resolve => setTimeout(resolve));

    // loop through all users to check that they are rendered
    result.data.users.forEach(user => {
      // find a row which has firstName and lastName of each person
      const firstNameHolder = getByText(
        new RegExp(`${user.firstName} ${user.lastName}`, "ig")
      );
      // since these are dom nodes, we can find the next sibling which contains an email
      const emailHolder = firstNameHolder.nextElementSibling;
      // look for the username holder as well
      const userNameHolder = emailHolder.nextElementSibling;
      // ensure email holder has email
      expect(emailHolder.textContent).toBe(`Email: ${user.email}`);
      // ensure username holder has username
      expect(userNameHolder.textContent).toContain(user.username);
    });
  });
});