我有一個單元測驗，包括渲染一個使用useSWR來獲取資料的組件。 但是在呼叫expect()之前，資料還沒有準備好，所以測驗失敗。
test("StyleOptionDetails contains correct style option number", ( ) => {
renderWithMockSwr(
<StyleOptionDetails(
{...mockIStyleOptionDetailsProps}。
/>。
)
expect(screen.getByText(123) ).toBeInTheDocument()。
});
但如果我加入一個延遲setTimeout()，它將通過測驗。
setTimeout(() => {
console.log('this will run after 2 second')
expect(screen.getByText(123) .toBeInTheDocument()。
}, 2000）。)
創建延遲或等待資料的正確方法是什么？
uj5u.com熱心網友回復：
我在其他地方對ReactJS的問題有一個類似的答案，Web Fetch API（等待取數完成后執行下一條指令）。 讓我把我對你的問題的解決方法說出來吧。
如果你的函式
如果你的函式renderWithMockSwr()是異步的，那么如果你希望它在呼叫下一行之前等待執行完畢，請使用await命令。
await renderWithMockSwr(
<StyleOptionDetails()
{...mockIStyleOptionDetailsProps}。
/>。
)
async很好。 await也是如此。 看看吧。Mozilla 開發者網路。異步函式
uj5u.com熱心網友回復：
盡管我認為你已經在這樣做了，但首先要注意的是，你不應該實際從你的測驗中獲取任何資料--你應該模擬結果。
一旦你這樣做，你將使用 waitFor 工具來幫助你進行異步測驗 - 這個工具基本上接受一個回傳期望的函式（expect），并將在測驗的該點保持，直到期望被滿足。
讓我們提供一個例子。 以我在下面創建的假想組件為例：
const MyComponent=（/span>）=> {
const [data, setData] = useState（）。
useEffect(() => {
MyService.fetchData（）。 then((response) => setData（response））。
}, []);
if (! data) {
return (<p>/span>Loading. ...</p>）。)
}
// else; }
return (
<div>/span>
<h1>DATA！</h1>
<div>/span>
{data.map((datum) => (<p>{datum}</p> ) }
</div>)}。
</div>>
);
}
因此，對于你的測驗，你要做的是
import MyService from ' ./MyService' /span>。
import MyComponent from ' ./MyComponent';
describe('MyComponent', () => {
const mockData = ['Spengler', 'Stanz', 'Venkman', 'Zeddmore'] 。
beforeEach(() => {
jest.spyOn(MyService, 'fetchData')
.mockImplementation(
() => new Promise(（res）=> setTimeout(() => res（mockData）, 200)
);
});
afterEach(() => {
MyService.fetchData.mockRestore（）。
});
it('先顯示加載，獲取后顯示資料', async () => {
render(<MyComponent /> ) 。
//在獲取完成之前。
expect(screen.getByText(/Loading/) .toBeInTheDocument()。
expect(screen.queryByText('DATA! ')).toBeNull()。
//在獲取完成后...。
// await waitFor將在此等待該值為真；如果5秒后仍未發生，則測驗失敗。
await waitFor(() => expect（螢屏。 getByText('DATA!')).toBeInTheDocument() 。)
expect(screen.queryByText(/Loading/)。 toBeNull(); //我們不需要等待這個，因為我們在前一行等待了適當的條件。
});
});
這沒有經過測驗，但類似這樣的東西應該可以使用。 你的嘲諷方法可能會因你如何構建你的fetch而有些不同。
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/310310.html
標籤：