useQuery:无法监视useQuery属性，因为它不是函数

Question

有一个类似的简单useQuery

const {
isLoading, isError, data,
} = useQuery(['courses', { userId: someUserId }], fetchDataFromBackendServer);

在我的单元测试中，我从一开始就想要useQuery返回信息(我想这样做是有原因的，但这与主题无关(

describe.only('Title', () => {
beforeEach(() => {
jest.clearAllMocks();
jest.spyOn(React, 'useQuery').mockResolvedValue({ isError: false, isLoading: false });
}
...
}

它告诉我：无法监视useQuery属性，因为它不是函数；未定义，而是给定

麻烦你把它修好好吗？

Answer 1

首先，React不提供useQuery钩子。

我想你正在使用反应查询

第二，如果你想使用jest.spyOn(obj, 'method')，你不能从obj中破坏这个方法。这意味着你应该像在组件中使用ReactQuery.useQuery()一样使用它。

例如

import { render } from '@testing-library/react';
import React from 'react';
import * as ReactQuery from 'react-query';
describe('70660790', () => {
test('should pass', () => {
jest.spyOn(ReactQuery, 'useQuery').mockImplementation();
function Test() {
ReactQuery.useQuery('todos');
return null;
}
render(<Test />);
expect(ReactQuery.useQuery).toBeCalledWith('todos');
});
});

测试结果：

PASS  examples/70660790/index.test.tsx (11.646 s)
70660790
✓ should pass (18 ms)
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        13.036 s

看看react-query如何导出桶文件中的钩子，我们必须使用名称空间导入。

最后，您不应该模拟第三方包提供的useQuery挂钩，并测试实现细节。您应该继续使用原始的useQuery钩子和mock副作用函数，如fetchDataFromBackendServer(我认为它是对远程服务器的API调用(。然后您可以测试组件的输出。参见测试

同样，不要推荐mockuseQuery。Mock实现可能与原始实现不一致，这将导致您的测试建立在错误的Mock实现上。这会导致测试用例通过，但程序在运行时不正确。

而且，测试实现细节也会使测试用例变得脆弱。实现细节的微小更改将导致测试用例失败，您将不得不修改测试用例。