要测试的组件
class Carousel extends React.Component {
state = {
slides: null
}
componentDidMount = () => {
axios.get("https://s3.amazonaws.com/rainfo/slider/data.json").then(res => {
this.setState({ slides: res.data })
})
}
render() {
if (!slides) {
return null
}
return (
<div className="slick-carousel">
... markup trancated for bravity
</div>
)
}
}
export default Carousel
测试
import React from "react"
import renderer from "react-test-renderer"
import axios from "axios"
import Carousel from "./Carousel"
const slides = [
{
ID: "114",
REFERENCE_DATE: "2018-07-02",
...
},
{
ID: "112",
REFERENCE_DATE: "2018-07-06",
...
},
...
]
jest.mock("axios")
it("", () => {
axios.get.mockImplementationOnce(() => Promise.resolve({ data: slides }))
const tree = renderer.create(<Carousel />).toJSON()
expect(tree).toMatchSnapshot()
})
快照只记录null
,因为我想在执行的那一刻state.slides = null
。
在axios完成获取数据后,我不能指望如何运行期望值。
在线上的大多数样本要么使用酶,要么显示具有返回承诺的异步功能的测试。我找不到一个仅使用笑话和渲染组件显示示例的示例。
我尝试使测试功能async
,也使用done
回调,但没有运气。
简而言之:
it("", async () => {
axios.get.mockImplementationOnce(() => Promise.resolve({ data: slides }))
const tree = renderer.create(<Carousel />);
await Promise.resolve();
expect(tree.toJSON()).toMatchSnapshot()
})
应该做的工作
详细信息:除了您模拟的对API数据的调用之外,异步调用仍在进行。因此,我们需要将toMatchSnapshot
调用转到微任务队列的末尾。setTimeout(..., 0)
或setImmediate
也可以使用,但是我发现await Promise.resolve()
它更好地被识别为“下面的所有内容都将排在队列末尾”
[UPD]固定代码段:.toJSON
必须在等待之后,它返回的对象将永远不会更新
问题内容: 我有这个反应 在这种情况下,如何测试axios?开玩笑说那里有一个异步代码的用例,在那里他们使用了模拟功能,但是我不知道我是否可以用axios做到这一点?参考:https : //facebook.github.io/jest/docs/tutorial- async.html 到目前为止,我已经测试了它是否返回了正确的类型 我不知道如何传递模拟数据并测试它是否返回,但是有人有任何想法
问题内容: 我在带有打字稿的React Router v5.1.2中使用UseHistory挂钩吗?运行单元测试时,我遇到了问题。 TypeError:无法读取未定义的属性“ history”。 我也尝试使用,但仍然无法正常工作。 问题答案: 浅化使用的反应功能组件时,我需要相同的内容。 在我的测试文件中解决了以下模拟问题:
我有下面的打字稿类,我想测试在笑话。 这是我的测试: 如何模拟MyClass中使用的foo函数,以使测试通过?
问题内容: 我正在尝试为一个简单的React组件编写一个简单的测试,并且我想使用Jest来确认我用酶模拟点击时已调用了一个函数。根据Jest文档,我应该能够使用它:spyOn。 但是,当我尝试此操作时,我不断得到暗示我的间谍未定义的信息。我的代码如下所示: 在我的测试文件中: 有人了解我在做什么错吗? 问题答案: 嗨,伙计,我知道我来晚了,但是除了您的方式之外,您几乎已经完成,没有任何改变。当您使
问题内容: 这是我的第一个前端测试经验。在这个项目中,我正在使用jest快照测试,并且组件内部出现错误。 我浏览了一些有趣的文档,发现“手动模拟”部分,但是我还不知道该如何做。 问题答案: 开玩笑的文档现在有一个“官方”解决方法: JSDOM中未实现的模拟方法
问题内容: 我有一个依赖于导出变量的文件。此变量设置为,但是如果需要,可以将其设置为手动设置,以防止下游服务请求时出现某些行为。 我不确定如何在Jest中模拟变量,以便更改测试和条件的值。 例: 问题答案: 如果将ES6模块语法编译为ES5,则此示例将起作用,因为最后,所有模块导出都属于同一对象,可以对其进行修改。 另外,您可以切换到raw commonjs 函数,并借助以下方法做到这一点: