在 Jest 中模拟 URQL 的获取状态答案

【问题标题】：Mocking the fetching state of URQL in Jest在 Jest 中模拟 URQL 的获取状态
【发布时间】：2020-12-02 16:24:21
【问题描述】：

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

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>
    );
};

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

【问题讨论】：

标签： reactjs jestjs react-testing-library urql

【解决方案1】：

这里是维护者，

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

您的组件挂载并检查缓存中是否存在同步状态。
之所以如此，是因为我们只做executeQuery: jest.fn(() => fromValue(graphqlData)),

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

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

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

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

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

【讨论】：