像這樣有一個簡單的 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 屬性，因為它不是函式；給定的未定義
請熱修復這個？
uj5u.com熱心網友回復：
首先，React 不提供useQuery鉤子。
我想你正在使用react-query
第二，如果你想使用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鉤子和模擬副作用函式，例如fetchDataFromBackendServer（我想這是對遠程服務器的 API 呼叫）。然后你可以測驗組件的輸出是什么。見測驗
同樣，不推薦 mock useQuery。模擬實作可能與原始實作不一致，這將導致您的測驗建立在錯誤的模擬實作上。這會導致您的測驗用例通過，但程式在運行時不正確。
而且，測驗實作細節也可能使測驗用例易受攻擊。實作細節的微小變化將導致測驗用例失敗，您將不得不修改測驗用例。
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/407999.html
標籤：