React测试库-带有waitFor/waitForElementToBeRemoved的fakeTimers

Question

上次我将测试库/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调用，完成后，我们希望显示当前日期。如果调用未完成，则屏幕上会显示一些加载程序/微调器。当我从代码中删除loader state和waitForElementToBeRemoved((时，我在屏幕上模拟了日期，一切都像预期的一样，否则会显示真实的日期。

Answer 1

我不确定getData内部发生了什么，但如果它使用setTimeout或类似的东西，那么您需要告诉jest提前或刷新假计时器。

我也遇到过类似的问题，我使用的是真正的计时器，所有的测试都通过了，然后当使用假计时器时，它们都失败了。在我的场景中，我认为是因为我的测试没有等待超时结束，而是立即执行断言，就好像超时已经过去了，而实际上没有。在调用waitForElementToBeRemoved之前添加jest.advanceTimersByTime(theSetTimeoutTime)几乎在所有情况下都修复了我的测试。