使用 react-relay 测试时组件未呈现

Question

我正在尝试使用 React Relay 和 React 测试库测试组件

// @flow
import { Suspense } from 'react';
import {
  RelayEnvironmentProvider,
  useLazyLoadQuery,
  graphql,
} from 'react-relay/hooks';
import { createMockEnvironment, MockPayloadGenerator } from 'relay-test-utils';
import { render, cleanup, screen, act } from '@testing-library/react';
import Banner from './Banner';
jest.mock('react-router-dom', () => ({
  useLocation: jest.fn(() => ({
    pathname: 'some-path',
  })),
}));
describe('<Banner>', () => {
  let mockEnvironment;
  const defaultMockResolver = {
    // We do not want a consistent return in this case since we want the default MockPayloadGenerator behavior for most fields
    // See https://relay.dev/docs/en/testing-relay-components#mock-resolver-context
    // eslint-disable-next-line consistent-return
    String(context) {
      if (context.name === 'viewer') {
        return {id: 111 };
      }
    },
  };
  beforeEach(() => {
    mockEnvironment = createMockEnvironment();
  });
  afterEach(cleanup);
  it('renders - snapshot', () => {
    mockEnvironment = createMockEnvironment();
    const RelayComponent = () => {
      const data = useLazyLoadQuery(
        graphql`
          query BannerTestQuery @relay_test_operation {
            viewer {
              # Spread the fragment you want to test here
              ...Banner_viewer
            }
          }
        `,
        {},
      );
      return <Banner viewer={data.myData} />;
    };
    render(
      <RelayEnvironmentProvider environment={mockEnvironment}>
        <Suspense fallback="Loading...">
          <RelayComponent />
        </Suspense>
      </RelayEnvironmentProvider>,
    );
    // expect(container.firstChild).toMatchSnapshot();
    act(() => {
      mockEnvironment.mock.resolveMostRecentOperation(operation =>
        MockPayloadGenerator.generate(operation, defaultMockResolver),
      );
    });
    screen.debug();
  });
});

然而，该测试不会使用模拟数据加载组件，而只会返回 Suspense 回退

Answer 1

这确实有效：https://githubmemory.com/repo/facebook/relay/issues/3276

重要的是，在渲染组件之前调用queueOperationResolver。