reactjs - 在 Jest 中模拟 URQL 的获取状态

Question

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

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 .任何帮助，将不胜感激。

Answer 1

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

您的组件安装并检查缓存中是否存在同步状态。

这是因为我们只做 executeQuery: jest.fn(() => fromValue(graphqlData)),

我们可以看到，这实际上归结为相同的结果，就好像结果刚从缓存中出来一样(我们永远不需要点击 API，所以我们永远不会点击获取)。
我们可以通过添加 setTimeout, ... 来解决这个问题。但是 Wonka (urql 使用的流媒体库)为此提供了内置解决方案。
我们可以利用 delay操作符来模拟获取状态:

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

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