React 測試庫 - 帶 waitFor/waitForElementToBeRemoved 的 fakeTimers

Question

上次我將 testing-library/dom 從版本 7.29.4 更新到 8.0.0。 之后，只要使用 waitFor/waitForElementToBeRemoved，jest.useFakeTimers 就會停止工作。

export default function Test() {
const [loaded, setLoaded] = useState(false);

const getDataCallback = useCallback(() => {
    return getData();
}, [])

useEffect(() => {
    getDataCallback().then(data => {
        setLoaded(true)
    });
}, [])


return (
        <>
        {
            loaded ?
            <>
                {new Date().toDateString()} //displays current date
            </>
            : <Loader/>
        }
        </>
)}

測試代碼：

const mockFunc = jest.spyOn(api, "getData");
const fakeData =  [{ date: "2020-01"}, { date: "2020-02"},];

beforeEach(() => {
    jest.useFakeTimers("modern").setSystemTime(new Date(2020, 2, 3));
    mockFunc.mockResolvedValue(fakeData);
})

it("test", async () => {
    render(<Test />);
    await waitForElementToBeRemoved(screen.queryByTestId("loader"));

    expect(screen.getByText(/tue mar 03 2020/i)).toBeInTheDocument();
})

在這段代碼中，它是一些虛假的 api 調用，完成后我們想要顯示當前日期。 如果調用未完成，則屏幕上會出現一些加載器/微調器。 當我從代碼中刪除加載器 state 和 waitForElementToBeRemoved() 時，我在屏幕上模擬了日期並且一切都按預期工作，否則顯示真實日期。

Answer 1

我不確定你的getData內部發生了什么，但如果它使用setTimeout或類似的，那么你需要告訴 jest 推進假計時器或刷新它們。

我有一個類似的問題，我使用的是真實計時器並且所有測試都通過了，然后當使用假計時器時它們都失敗了。 在我的場景中，我認為這是因為我的測試沒有等待超時完成，而是立即執行斷言，就好像超時已經過去了，但實際上沒有。 在幾乎所有情況下，在調用waitForElementToBeRemoved之前添加jest.advanceTimersByTime(theSetTimeoutTime)修復了我的測試。