Reactjs 测试React本机组件'；s使用try/catch并调用Image.getSize的函数

我正在尝试为组件中定义的以下React本机函数编写jest测试：

该函数获取一个数据对象，该对象有两个字段：

url

和

image

，并根据它们的值设置组件的状态

当data.image不是null而是图像的URI时，有没有建议如何测试该函数？（例如

http://a.com/a.png

）

---

最好的方法是模拟

Image.getSize（）

，并从调用时传递的参数中获取回调

下面是一个简单的工作示例：

---

example.js

import*as React from'React'；
从“react native”导入{Image}；
导出类示例扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={}；
}
getArticleDetails（数据）{
设{url，image}=data
如果（！图像）{
this.setState（{url，image}）
}否则{
试一试{
Image.getSize（图像，（宽度，高度）=>{
如果（宽度>2000 |高度>2000）{
image=null
}
this.setState（{url，image}）
}，（错误）=>{
image=null
this.setState（{url，image，title，description}）；
})
}捕获（e）{
image=null
this.setState（{url，image}）
}
}
}
render（）{
返回null；
}
}

---

example.test.js

import*as React from'React'；
从“react native”导入{Image}；
从“反应测试渲染器”导入渲染器；
从“./Example”导入{Example}；
描述（'示例'，（）=>{
它（'应该调用Image.getSize（）'，（）=>{
//为Image.getSize（）创建模拟实现
const getSizeMock=jest.spyOn（图像“getSize”）；
getSizeMock.mockImplementation（（）=>{/*什么都不做*/}）；
常数数据={
url:“模拟url”，
图片：'只需制作！图片返回false'
}
const comp=renderer.create（）.root.instance；
公司getArticleDetails（数据）；
期望（getSizeMock）.已收集时间（1）；
//获取调用Image.getSize（）时使用的参数
//（见https://jestjs.io/docs/en/mock-function-api#mockfnmockcalls)
const getSizeArgs=getSizeMock.mock.calls[0]；
expect（getSizeArgs[0]）.toBe（data.image）；//第一个参数应该是data.image
const success=getSizeArgs[1]；//第二个参数是成功回调
const error=getSizeArgs[2]；//第三个参数是错误回调
//使用宽度2000测试成功回调
成功（2001年、2001年）；
expect（comp.state.url）.toBe（data.url）；
expect（comp.state.image）.toBe（null）；
//还原映像。getSize（）
getSizeMock.mockRestore（）；
});
});

哇，非常感谢您的努力！你能解释一下以expect（mock.mock.calls[0][0]）.toBe（data.image）开头的4行代码吗；？我不明白他们的意思。为什么嘲笑，嘲笑？调用[0][0]和[0][1]以及[0][2]是什么意思？为什么成功回调（100）（100）？当然，

mock.mock.calls

mock.mock.calls[0][0]

是对

Image.getSize（）

mock的第一个调用的第一个参数，它应该是

data.Image

mock.mock.calls[0][1]

是第一个调用（即成功回调）的第二个参数

mock.mock.calls[0][2]

是第一个调用（即错误回调）的第三个参数。一旦我们能够访问回调，我们就可以直接给他们打电话，以确保他们工作正常。令人印象深刻。我明天会测试，然后再把它标为正确答案。@Yossi不用担心。我更改了变量名并添加了明确的注释，希望这会有所帮助。是的，这是很酷的什么可以做的作品像一个魅力。真酷！多谢！

getArticleDetails (data) {
  const { url, image } = data

  if (!image) {
    this.setState({ url, image })
  } else {
    try {
      Image.getSize(image, (width, height) => {
        if (width > 2000 || height > 2000) {
          image = null
        }
        this.setState({ url, image })
      }, (error) => {
        image = null
        this.setState({ url, image, title, description })
      })
    } catch (e) {
      image = null
      this.setState({ url, image })
    }
  }
}