我如何使用 isLoading 状态测试 useEffect答案

【问题标题】：how I test useEffect with isLoading state我如何使用 isLoading 状态测试 useEffect
【发布时间】：2020-12-11 12:13:07
【问题描述】：

我想在 isLoading 状态改变组件时构建测试。我知道在类组件中有使用酶做 setState 的方法，但我想知道我在这里怎么做。

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;

【问题讨论】：

标签： reactjs jestjs enzyme react-component react-state-management

【解决方案1】：

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

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);

【讨论】：