我如何使用 isLoading 状态测试 useEffect

Question

我想在 isLoading 状态更改组件时构建测试。我知道在 class 组件中有 setState with enzyme 的方法，但我想知道我如何在这里做到这一点。

const Spacex = () => {
    const [open, setOpen] = useState(false);
    const [upComingLaunches, setUpComingLaunches] = useState([]);
    const [Launchpad, setLaunchpad] = useState([])
    const [isLoading, setIsLoading] = useState(true);
    useEffect(() => {
        let tempData;
        SpaceXNextLaunche()
            .then(data => {
                setUpComingLaunches(data);
                tempData = data;
                return LaunchPad()
            }).then(dataLaunch => {
                const foundTheLaunch = dataLaunch.docs.filter((Launch, index) => {
                    return tempData.id === Launch.id
                });
                setLaunchpad(foundTheLaunch);
                setIsLoading(false);
            })
    }, [])
    if (isLoading) return <LoadingComp />
    return (
        <div>
            <div className="upcoming-launches">
                <h1 className={styles.title}>upcoming launche</h1>
                <div className={styles.CountDownWarrper}>
                    {Object.keys(upComingLaunches).length > 0 ?
                        <Card className={styles.CountDownCard}>
                            <div className={styles.MissionName}>{upComingLaunches.name}</div>
                            <div className={styles.gridBadges}>
                                <div className={styles.CountDown}><CountDownClock upComingLaunches={upComingLaunches} /></div>
                                <div className={styles.badgeFlex}><img className={styles.badge} src={upComingLaunches.links["patch"]["small"]} alt="mission patch" /></div>
                            </div>
                            <GoogleMap
                                mapVisiblity={(e) => setOpen(!open)}
                                open={open}
                                placeName={Launchpad[0].launchpad.full_name} />
                        </Card>
                        : null}
                </div>
            </div>
        </div>
    )
}
export default Spacex;

Answer 1

测试功能组件的正确方法是测试实际功能的行为，而不是它们的实现。在您的情况下，在超时后将 SpaceXLaunche() 模拟为 return 其数据，例如：

function SpaceXLauncheMock() {
    return new Promise(resolve => {
        setTimeout(resolve(data), 1500);
    });
}

const SpaceXLaunche = jest.spyOn(SpaceXLaunche.prototype, 'SpaceXLaunche')
    .mockImplementation(SpaceXLauncheMock);

然后，您将测试 isLoading 的结果 - LoadingComp 是否存在，最初，超时后再次测试（不要忘记输入 done作为测试用例的参数):

expect(component.contains(<LoadingComp />)).toBe(true);

setTimeout(() => {
    expect(component.contains(<LoadingComp />)).toBe(false);

    done();
}, 2000);

我如何使用 isLoading 状态测试 useEffect

how I test useEffect with isLoading state

reactjs

jestjs

enzyme

react-component

react-state-management