断言错误：预期 null 深度等于 XXX

Question

我使用 vitest 来测试我的组件和钩子。

我有一个想要测试的

useLocalTime

钩子，但是

renderHook

中的

@testing-library/react

函数始终返回 null。

知道为什么吗？

这是钩子：

import {useEffect, useState} from "react";
import {Dayjs} from "dayjs";

interface Props {
    dayJsObject: Dayjs;
    format?: string;
}

const capitalizeFirstLetters = (text: string) => {
    return text
        .toLowerCase()
        .split(" ")
        .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
        .join(" ");
};

export const useLocalTime = ({dayJsObject, format}: Props) => {
    const [formattedTime, setFormattedTime] = useState<string | null>(null);

    useEffect(() => {
        const updateTime = () => {
            const currentTime = dayJsObject.format(format ?? "D MMMM YYYY LTS");

            setFormattedTime(capitalizeFirstLetters(currentTime));
        };

        const interval = setInterval(updateTime, 1000);

        return () => clearInterval(interval);
    }, [dayJsObject, format]);

    return formattedTime;
};

这是测试：

import {renderHook} from "@testing-library/react";
import dayjs from "dayjs";
import {useLocalTime} from "ui/hooks/useLocalTime";

describe("useLocalTime", () => {
    it("should return the formatted time", () => {
        const dayJsObject = dayjs("2022-06-16T14:49:35.718Z");
        const {result} = renderHook(() => useLocalTime({dayJsObject}));

        expect(result.current).toEqual("16 June 2022 14:49:35");
    });
});

这是错误：

AssertionError: expected null to deeply equal '16 June 2022 14:49:35'

- Expected: 
"16 June 2022 14:49:35"

+ Received: 
null

Answer 1

那是因为

updateTime

钩子中的

useLocalTime

由于处于 1000 毫秒的间隔而没有触发。它返回钩子中提供的默认状态 (

null

)。

1. 您需要使用假计时器模拟间隔并进行这样的测试

describe("useLocalTime", () => {
    it("should return the formatted time", () => {
        jest.useFakeTimers();
        const dayJsObject = dayjs("2022-06-16T14:49:35.718Z");
        const {result} = renderHook(() => useLocalTime({dayJsObject}));
        act(() => {
         jest.advanceTimersByTime(1100);
        });
        expect(result.current).toEqual("16 June 2022 14:49:35");
    });
});

2. 或者您可以更新挂钩以在初始加载时调用

   updateTime

   。