Question

我有一个简单的组件。它所做的只是使用useQuery获取数据并将其传递给另一个组件。该组件工作正常，但如果不按如下所述添加hack，就无法对其进行测试：

我看过MockedProvider requires timeout，这是2.5年前问的。还有其他方法吗？我不敢相信图书馆团队提倡将“ wait / setTimeout”设置为单位！

组件：

export const PROFILE_QUERY = gql`
  query {
    profile {
      roles
    }
  }
`;

export const Connected = () => {
  const { loading, data, error } = useQuery(PROFILE_QUERY);
  const setCurrentProfile = (role: string) => {
    cachedSettings(getSettings(role));
  };
  const roles = data?.profile?.roles;
  return <Profile {...{ roles, loading, error, setCurrentProfile }} />;
};

测试用例：

import React from 'react';
import { render } from '@testing-library/react';
import { MemoryRouter } from 'react-router';
import Profile from '../Profile';
import ConnectedProfile from '..';
import { MockedProvider, MockedResponse } from '@apollo/client/testing';
import { PROFILE_QUERY } from '../Profile.connected';

jest.mock('../Profile', () => {
  return jest.fn(() => null);
});

describe('Connected <Profile />', () => {
  const renderComponent = (roles: string[] | undefined) => {
    const mock: MockedResponse = {
      request: {
        query: PROFILE_QUERY
      },
      result: {
        data: {
          profile: {
            roles
          }
        }
      }
    };

    return render(
        <MockedProvider mocks={[mock]} addTypename={false}>
          <MemoryRouter>
            <ConnectedProfile />
          </MemoryRouter>
        </MockedProvider>
    );
  };

  it('multiple roles must have been passed', async () => {
    renderComponent(['foo', 'bar']);
    **//DOCUMENTATION  says do following? - will have to wrap rendering in act as well
    //await new Promise(resolve => setTimeout(resolve, 0));**
    const args = (Profile as jest.Mock).mock.calls[0][0];
    expect(args.roles).toEqual(['agent', 'administrator']);
  });

  it('no roles passed', async () => {
    renderComponent(undefined);
    //DOCUMENTATION says do following?
    //await new Promise(resolve => setTimeout(resolve, 0));
    const args = (Profile as jest.Mock).mock.calls[0][0];
    expect(args.roles).toEqual(undefined);
  });

  afterEach(() => (Profile as jest.Mock).mockClear());
});

Answer 1

如果MockedProvider是异步的并且包含一滴答的延迟，则要求至少延迟相同时间是合理的。这是异步测试的一个常见问题，这是流行的flush-promises实用程序的作用。

反应测试库专注于黑盒测试，并鼓励使用waitFor帮助程序而不依赖于实现。由于轮询间隔，可能会导致测试时间累积：

renderComponent(undefined);
await waitFor(() => {
  expect(Profile).toBeCalledTimes(1);
  expect(Profile).toBeCalledWith(expect.objectContaining({ roles: undefined }));
});

由于这种MockedProvider行为是已知的并已记录在案，因此可以在renderComponent帮助程序本身中安全地实现：

const renderComponent = async (roles: string[] | undefined) => {
    ...
    const result = render(
        <MockedProvider mocks={[mock]} addTypename={false}>...</MockedProvider>
    );
    await new Promise(resolve => setTimeout(resolve));
    return result;
};

...
await renderComponent(undefined);
expect(Profile).toBeCalledTimes(1);
expect(Profile).toBeCalledWith(expect.objectContaining({ roles: undefined }));

使用MockedProvider模拟useQuery返回的数据

1 个答案: