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

问题描述

我正在尝试使用 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 回退

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）