reactjs - 我如何使用 isLoading 状态测试 useEffect
问题描述
我想在 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;
解决方案
测试功能组件的正确方法是测试实际功能的行为,而不是它们的实现。在您的情况下,这将模拟在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);
推荐阅读
- django - django factory boy 无法导入
- amazon-web-services - 无法从 cron 同步到 Amazon S3
- javascript - 需要在页面加载后触发一个函数(它适用于 jquery 但不是纯 javascript)
- python - 将基数 2(二进制)数转换为基数 10 在 python 中不能很好地工作
- javascript - 理解 JS 中静态属性的作用域
- django - django 帐户/登录覆盖
- node.js - 使用 Express 和 Multer 进行文件上传:获取随机名称和未知格式的文件
- hadoop - 由于 ssh 连接被拒绝,macOS 上的 hadoop 启动辅助名称节点失败
- c# - 使用 SSIS 数据流任务中的脚本组件将对象中的数据提取到 DataTable
- java - 如何使用链接的进度条在活动之间制作加载屏幕?(安卓工作室)