2

我试图在我的测试中模拟获取状态。成功模拟了有数据的状态和有错误的状态。您可以在下面找到一个示例：

const createMenuWithGraphQL = (graphqlData: MockGraphQLResponse): [JSX.Element, MockGraphQLClient] => {
    const mockGraphQLClient = {
        executeQuery: jest.fn(() => fromValue(graphqlData)),
        executeMutation: jest.fn(() => never),
        executeSubscription: jest.fn(() => never),
    };

    return [
        <GraphQLProvider key="provider" value={mockGraphQLClient}>
            <Menu {...menuConfig} />
        </GraphQLProvider>,
        mockGraphQLClient,
    ];
};

it('displays submenu with section in loading state after clicking on an item with children', async () => {
    const [Component, client] = createMenuWithGraphQL({
        fetching: true,
        error: false,
    });
    const { container } = render(Component);
    const itemConfig = menuConfig.links[0];

    fireEvent.click(screen.getByText(label));

    await waitFor(() => {
        const alertItem = screen.getByRole('alert');

        expect(client.executeQuery).toBeCalledTimes(1);
        expect(container).toContainElement(alertItem);
        expect(alertItem).toHaveAttribute('aria-busy', 'false');
    });
});

该组件如下所示：

export const Component: FC<Props> = ({ label, identifier }) => {
    const [result] = useQuery({ query });

    return (
        <div role="group">
            {result.fetching && (
                <p role="alert" aria-busy={true}>
                   Loading
                </p>
            )}
            {result.error && (
                <p role="alert" aria-busy={false}>
                   Error
                </p>
            )}
            {!result.fetching && !result.error && <p>Has data</p>}
        </div>
    );
};

我不知道我做错了什么。当我运行测试时，它说fetchingis false。任何帮助，将不胜感激。

4

1 回答 1

2

这里的维护者，

我认为这里的问题是您正在同步返回executeQuery. 让我们看看会发生什么。

  • 您的组件安装并检查缓存中是否存在同步状态。
  • 情况就是这样，因为我们只做executeQuery: jest.fn(() => fromValue(graphqlData)),

我们可以看到这实际上归结为相同的结果，就好像结果刚刚从缓存中出来一样（我们永远不需要点击 API，所以我们永远不会点击获取）。

我们可以通过添加一个setTimeout, ...但是Wonka（urql 使用的流媒体库）有内置的解决方案来解决这个问题。

我们可以利用delay操作符来模拟获取状态：

    const mockGraphQLClient = {
        executeQuery: jest.fn(() => pipe(fromValue(data), delay(100)),
    };

现在我们可以fetching在前 100 毫秒内正确检查状态，之后我们可以waitFor用来检查后续状态。

于 2020-08-17T12:29:28.337 回答