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

【问题标题】：React testing library - fakeTimers with waitFor/waitForElementToBeRemovedReact 测试库 - 带有 waitFor/waitForElementToBeRemoved 的 fakeTimers
【发布时间】：2021-06-24 14:50:44
【问题描述】：

上次我将 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 调用，当它完成后，我们想要显示当前日期。如果调用没有完成，那么屏幕上会出现一些加载器/微调器。当我从代码中删除加载程序状态和 waitForElementToBeRemoved() 时，我在屏幕上模拟了日期，一切都按预期工作，否则显示真实日期。

【问题讨论】：

我也遇到了这个问题。在我的情况下，我的所有测试都通过了，但运行缓慢，因为它们使用的是真正的计时器，并且 jest.useFakeTimers 会立即导致每个测试在调用 waitForElementToBeRemoved 时失败。如果我找到解决方案，我会发布。

标签： reactjs jestjs react-testing-library

【解决方案1】：

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

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

【讨论】：