Reactjs 如何使用Jest测试Ajax调用？

我想用Jest测试下面的代码

类登录扩展了React.Component{
getData（）{
$.ajax({
键入：“获取”，
url:myURL，
成功：功能（数据）{
//一些有数据的东西
},
错误：函数（）{
警报（“错误”）；
}
});
}
render（）{
返回(
//一些东西
);
}
}
导出默认登录；

如何使用jest测试Ajax调用？ 我还想要上面代码的代码覆盖率报告

---

提前感谢。

这是我的解决方案，我对您的代码进行了一些重构，以便于测试

index.tsx

，组件代码：

从“React”导入React；
从“jquery”导入美元；
类登录扩展了React.Component{
建造师（道具）{
超级（道具）；
this.handleError=this.handleError.bind（this）；
this.handleSuccess=this.handleSuccess.bind（this）；
}
公共获取数据（）{
常量myURL=https://github.com/mrdulin';
$.ajax({
键入：“GET”，
url:myURL，
成功：这是一个简单的成功，
错误：此为.handleError
});
}
公共渲染（）{
返回登录；
}
私有handleSuccess（数据）{
控制台日志（数据）；
}
私有句柄错误（）{
警报（“错误”）；
}
}
导出默认登录；

index.spec.tsx

，使用

jestjs

和

enzyme

从“React”导入React；
从“/”导入登录名；
从“jquery”导入美元；
从“酶”导入{shall}；
描述（'登录'，（）=>{
之后（（）=>{
开玩笑。恢复记忆（）；
});
测试（'should get data'，async（）=>{
const ajaxSpy=jest.spyOn（$，'ajax'）；
常量包装器=浅（）；
const instance=wrapper.instance（）；
（实例如有）。getData（）；
expect（wrapper.text（））.toBe（'Login'）；
期望（ajaxSpy）。使用({
键入：“GET”，
网址：'https://github.com/mrdulin',
//tslint:禁用下一行：无字符串文字
成功：实例['handleSuccess']，
//tslint:禁用下一行：无字符串文字
错误：实例['handleError']
});
});
测试（'handleSuccess'，（）=>{
constlogspy=jest.spyOn（控制台，'log'）；
常量包装器=浅（）；
const instance=wrapper.instance（）；
//tslint:禁用下一行：无字符串文字
实例['handleSuccess']（'some data'）；
expect（logSpy）.toBeCalledWith（'some data'）；
});
测试（'handleError'，（）=>{
window.alert=jest.fn（）；
常量包装器=浅（）；
const instance=wrapper.instance（）；
//tslint:禁用下一行：无字符串文字
实例['handleError']（）；
expect（window.alert）.toBeCalledWith（'ERROR'）；
});
});

100%覆盖率的单元测试结果：

PASS src/stackoverflow/58306745/index.spec.tsx（8.183s）
登录
✓ 应获取数据（27毫秒）
✓ 手动成功（3ms）
✓ 手柄错误（1ms）
一些数据
-----------|----------|----------|----------|----------|-------------------|
文件|%Stmts |%Branch |%Funcs |%Line |未覆盖行|s|
-----------|----------|----------|----------|----------|-------------------|
所有文件| 100 | 100 | 100 | 100 ||
index.tsx | 100 | 100 | 100 | 100 ||
-----------|----------|----------|----------|----------|-------------------|
测试套件：1个通过，共1个
测试：3次通过，共3次
快照：共0个
时间：9.545s

源代码：