Javascript axios在componentDidMount中获取数据后如何拍摄jest快照？

要测试的组件

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

class Carousel扩展了React.Component{
状态={
幻灯片：空
}
componentDidMount=（）=>{
axios.get（“https://s3.amazonaws.com/rainfo/slider/data.json）然后（res=>{
this.setState（{slides:res.data}）
})
}
render（）{
如果（！幻灯片）{
返回空
}
返回(
…我为勇敢而激动
)
}
}
导出默认旋转木马

试验

从“React”导入React
从“反应测试渲染器”导入渲染器
从“axios”导入axios
从“/Carousel”导入旋转木马
常量幻灯片=[
{
ID:“114”，
参考日期：“2018-07-02”，
...
},
{
ID:“112”，
参考日期：“2018-07-06”，
...
},
...
]
开玩笑的模仿（“axios”）
它（“，（）=>{
axios.get.mockImplementationOnce（（）=>Promise.resolve（{data:slides}））
const tree=renderer.create（）.toJSON（）
expect（tree.toMatchSnapshot（））
})

快照只记录

null

，因为在执行时我假设

state.slides=null

在axios完成数据获取后，我无法确定如何运行预期

大多数在线样本要么使用酶，要么显示带有返回承诺的异步函数的测试。我找不到一个只使用jest和渲染组件来显示示例的组件

我尝试使测试函数

异步

，也使用

done

回调，但没有成功

简而言之：

it("", async () => {
  axios.get.mockImplementationOnce(() => Promise.resolve({ data: slides }))

  const tree = renderer.create(<Carousel />);
  await Promise.resolve();
  expect(tree.toJSON()).toMatchSnapshot()
})

it（“，async（）=>{
axios.get.mockImplementationOnce（（）=>Promise.resolve（{data:slides}））
常量树=renderer.create（）；
等待承诺；
expect（tree.toJSON（））.toMatchSnapshot（）
})

我应该做这项工作

详细说明：除此之外，对API数据的模拟调用仍然以异步方式进行。所以我们需要

toMatchSnapshot

调用转到微任务队列的末尾

setTimeout（…，0）

或

setImmediate

也可以工作，但我发现

等待承诺。resolve（）

更容易识别，因为“下面的一切都快结束了”

---

[UPD]修复了代码段：

.toJSON

必须在等待后返回，它返回的对象将永远不会更新

第二天接受的答案开始失败。经过一些调整后，这似乎起到了作用：

import React from "react"
import renderer from "react-test-renderer"
import axios from "axios"
import Carousel from "./Carousel"

jest.mock("axios")
const slides = sampleApiResponse()
const mockedAxiosGet = new Promise(() => ({ data: slides }))
axios.get.mockImplementation(() => mockedAxiosGet)

// eventhough axios.get was mocked, data still comes anychrnonously,
// so during first pass state.slides will remain null
it("returns null initally", () => {
  const tree = renderer.create(<Carousel />).toJSON()
  expect(tree).toMatchSnapshot()
})

it("uses fetched data to render carousel", () => {
  const tree = renderer.create(<Carousel />)
  mockedAxiosGet.then(() => {
    expect(tree.toJSON()).toMatchSnapshot()
  })
})

function sampleApiResponse() {
  return [
    {
      ID: "114",
      REFERENCE_DATE: "2018-07-02",
      ...
    },
    {
      ID: "114",
      REFERENCE_DATE: "2018-07-02",
      ...
    },
  ]
}

从“React”导入React
从“反应测试渲染器”导入渲染器
从“axios”导入axios
从“/Carousel”导入旋转木马
开玩笑的模仿（“axios”）
常量幻灯片=sampleApiResponse（）
const mockedAxiosGet=新承诺（（）=>（{data:slides}））
axios.get.mockImplementation（（）=>mockedAxiosGet）
//尽管axios.get遭到嘲笑，但数据仍然会以任何方式出现，
//因此，在首次通过状态期间，幻灯片将保持为空
它（“初始返回null”，（）=>{
const tree=renderer.create（）.toJSON（）
expect（tree.toMatchSnapshot（））
})
它（“使用提取的数据呈现旋转木马”，（）=>{
const tree=renderer.create（）
mockedAxiosGet.then（（）=>{
expect（tree.toJSON（））.toMatchSnapshot（）
})
})
函数sampleApiResponse（）{
返回[
{
ID:“114”，
参考日期：“2018-07-02”，
...
},
{
ID:“114”，
参考日期：“2018-07-02”，
...
},
]
}

感谢您的帮助和良好的解释。我能够想出'Promise.resolve（renderer.create（））。然后（tree=>{expect（tree.toJSON（））.toMatchSnapshot（）}'），虽然我不知道正在做什么，但似乎起了作用。我最终使用的代码更清晰、更好。谢谢。如果您使用

浅层

而不是渲染器，这是否也有效？@Zheng rongCai如果是浅层渲染，那么XHR调用应该在某个嵌套子级中发生。。。这将不会被渲染，因为它是浅渲染-不，它将不起作用。但否则它应该是workpromise

newpromise（（）=>（{data:slides}））

将永远无法解析。您需要

Promise.resolve（）

factory方法。使用构造函数

newpromise（）

您需要获取解析器作为参数，并像调用

newpromise（解析器=>resolver（{data:slides}））

一样调用它，但是

Promise.resolve（）

在具有更好可读性的同时也做同样的事情

import React from "react"
import renderer from "react-test-renderer"
import axios from "axios"
import Carousel from "./Carousel"

jest.mock("axios")
const slides = sampleApiResponse()
const mockedAxiosGet = new Promise(() => ({ data: slides }))
axios.get.mockImplementation(() => mockedAxiosGet)

// eventhough axios.get was mocked, data still comes anychrnonously,
// so during first pass state.slides will remain null
it("returns null initally", () => {
  const tree = renderer.create(<Carousel />).toJSON()
  expect(tree).toMatchSnapshot()
})

it("uses fetched data to render carousel", () => {
  const tree = renderer.create(<Carousel />)
  mockedAxiosGet.then(() => {
    expect(tree.toJSON()).toMatchSnapshot()
  })
})

function sampleApiResponse() {
  return [
    {
      ID: "114",
      REFERENCE_DATE: "2018-07-02",
      ...
    },
    {
      ID: "114",
      REFERENCE_DATE: "2018-07-02",
      ...
    },
  ]
}