Simple test using relay-test-utils and react-testing-library

setupFileAfterEnv.js

jest.mock('../src/relay/Environment', () => {
  const { createMockEnvironment } = require('relay-test-utils');
  return createMockEnvironment();
});

UserList.spec.tsx

import React from 'react';
import { render, cleanup } from '@testing-library/react';
import { MockPayloadGenerator } from 'relay-test-utils';
import UserListDefault from '../UserList';
import Environment from 'path/to/Environment';

afterEach(cleanup);

describe('<UserList />', () => {
  it('should reject query', () => {
    const { getByText } = render(<UserListDefault />);
    // @ts-ignore
    Environment.mock.rejectMostRecentOperation(new Error('A very bad error'));
    expect(getByText('Error: A very bad error')).toBeTruthy();
  });

  it('should reject query with function and render error with name of the operation', () => {
    const { getByText } = render(<UserListDefault />);
    // @ts-ignore
    Environment.mock.rejectMostRecentOperation((operation) =>
      new Error(`A error occurred on operation: ${operation.fragment.node.name}`)
    );

    expect(getByText('Error: A error occurred on operation: UserListQuery')).toBeTruthy();
  });

  it('should resolve query but no data', async () => {
    const { getByText } = render(<UserListDefault />);
    expect(getByText('loading')).toBeTruthy();

    // @ts-ignore
    Environment.mock.resolveMostRecentOperation((operation) =>
      MockPayloadGenerator.generate(operation),
    );

    expect(getByText(/ID: /)).toBeTruthy();
    expect(getByText(/User: /)).toBeTruthy();
    expect(getByText(/Email: /)).toBeTruthy();
  });

  it('should render success UserList', async () => {
    const { getByText, debug } = render(<UserListDefault />);

    // debug()
    // @ts-ignore
    Environment.mock.resolveMostRecentOperation(operation =>
      MockPayloadGenerator.generate(operation, {
        PageInfo() {
          return {
            hasNextPage: false,
            hasPreviousPage: false,
            startCursor: "YXJyYXljb25uZWN0aW9uOjA=",
            endCursor: "YXJyYXljb25uZWN0aW9uOjE="
          }
        },
        UserEdge() {
          return [
            {
              cursor: "YXJyYXljb25uZWN0aW9uOjA=",
              node: {
                email: "[email protected]",
                id: "Q2xpZW50OjE=",
                name: "Adhis Yudha",
              }
            },
            {
              cursor: "YXJyYXljb25uZWN0aW9uOjE=",
              node: {
                email: "[email protected]",
                id: "Q2xpZW50OjI=",
                name: "Bangkit Ilham",
              }
            }
          ]
        }
      })
    );

    // debug()

    expect(getByText('ID: Q2xpZW50OjE=')).toBeTruthy();
    expect(getByText('User: Adhis Yudha')).toBeTruthy();
    expect(getByText('Email: [email protected]')).toBeTruthy();

    expect(getByText('ID: Q2xpZW50OjI=')).toBeTruthy();
    expect(getByText('Email: [email protected]')).toBeTruthy();
    expect(getByText('User: Bangkit Ilham')).toBeTruthy();
  });
});

UserList.tsx

import React from 'react';
import { graphql, createFragmentContainer } from 'react-relay';
import { createQueryRendererModern } from './relay';

import { UserList_query } from './__generated__/UserList_query.graphql';

type Props = {
  query:  UserList_query
};

const UserList = ({ query }: Props) => {
  const { users } = query;

  return (
    <div>
      {users!.edges.map((edge) => (
        <div key={edge!.node.id}>
          <span>ID: {edge!.node.id}</span>
          <span>User: {edge!.node.name}</span>
          <span>Email: {edge!.node.email}</span>
        </div>
      ))}
    </div>
  )
};

const UserListFragmentContainer = createFragmentContainer(UserList, {
  query: graphql`
    fragment UserList_query on Query {
      users(first: 10) @connection(key: "UserList_users", filters: []) {
        edges {
          node {
            id
            name
            email
          }
        }
      }
    }
  `
});

export default createQueryRendererModern(UserListFragmentContainer, UserList, {
  query: graphql`
    query UserListQuery {
      ...UserList_query
    }
  `,
});