2 回答

TA貢獻1830條經驗 獲得超3個贊
這是我如何讓這個工作的“食譜”......
使用測試庫/反應...
import { render, fireEvent, waitForElement, act } from '@testing-library/react';
(+1 給@tmahle 這個建議)
通過創建“手動模擬”來模擬 axios(或者在我的情況下是包裝它的 API 模塊),這基本上需要__mocks__在包含同名文件的真實文件旁邊創建一個目錄。然后導出一個具有替換get方法(或您的代碼使用的任何一個)的屬性的對象。
//__mocks__/myclient.js
export default {
get: jest.fn(() => Promise.resolve({ data: {} }))
};
即使您不在測試中調用模擬代碼,您也需要import在測試文件中調用它...
import myapi from '../api/myapi';
jest.mock('../api/myai');
您可以模擬來自模擬 API 調用的響應,如下所示:
myapi.get.mockResolvedValueOnce({
data: { foo: "bar" },
});
我對這部分有點模糊......即使模擬的 API 請求立即以已解決的承諾響應,您可能需要wait編寫expects
const { getByText, getByTestId, container } = render(<MyComponent />);
await wait(() => getByText('Some text that appears after the '));
expect(container.innerHTML).toEqual('whatever');
所有這些都在各種文檔和 SO 問題中“出現在那里”......但我花了很長時間才把它們拼湊在一起。希望這可以節省您的時間。

TA貢獻1847條經驗 獲得超11個贊
誠然,這是對您的問題的一個側面回答,但我建議您嘗試使用 testing-library 及其所體現的理想,尤其是對于集成測試。
它在 DOM 和 React 兩種風格中都可用,使用哪一種可能取決于您的重定向發生在什么抽象級別:
https://github.com/testing-library/dom-testing-library https://github.com/testing-library/react-testing-library
使用此范例,您不會嘗試斷言用戶被重定向到正確的路徑,而是在重定向后屏幕上顯示正確的內容。您還可以將您的模擬限制在絕對必要的范圍內(如果您正在進行真正的集成測試,則您的測試環境無法模擬的可能沒有或只有瀏覽器 API)。
這里的整體方法可能會讓你模擬更少,并且可能渲染應用程序的更大部分。一個可能有用的例子可以在這里找到:https : //codesandbox.io/s/github/kentcdodds/react-testing-library-examples/tree/master/?fontsize=14&module=%2Fsrc%2F__tests__%2Freact -router.js&previewwindow=tests
由于這種方法中的嘲諷較少,因此您如何實現這一點的具體細節可能超出了您所提供示例的范圍,但上面的示例鏈接應該對入門有很大幫助。
添加回答
舉報