如何在 axios 在 componentDidMount 中获取数据后拍摄开玩笑的快照? [英] How to take a jest snapshot after axios fetched data in componentDidMount?

问题描述

要测试的组件

class Carousel 扩展 React.Component {状态 = {幻灯片:空}componentDidMount = () =>{axios.get("https://s3.amazonaws.com/rainfo/slider/data.json").then(res => {this.setState({ 幻灯片: res.data })})}使成为() {如果(！幻灯片){返回空}返回 (<div className="slick-carousel">... 标记为勇敢翻译

)}}导出默认轮播

测试

从react"导入 React从反应测试渲染器"导入渲染器从axios"导入 axios从./Carousel"导入轮播const 幻灯片 = [{编号: "114",REFERENCE_DATE: "2018-07-02",...},{编号: "112",REFERENCE_DATE:2018-07-06"，...},...]jest.mock("axios")it("", () => {axios.get.mockImplementationOnce(() => Promise.resolve({数据:幻灯片}))const tree = renderer.create(<Carousel/>).toJSON()期望(树).toMatchSnapshot()})

snapshot 只记录 null，因为在执行时我假设 state.slides = null.

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

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

我尝试制作测试函数 async，也使用 done 回调，但没有运气.

解决方案

简而言之:

it("", async() => {axios.get.mockImplementationOnce(() => Promise.resolve({数据:幻灯片}))const tree = renderer.create(<Carousel/>);等待 Promise.resolve();期望(tree.toJSON()).toMatchSnapshot()})

应该做的事情

详细说明:除了您模拟调用 API 数据之外，仍然以异步方式进行调用.所以我们需要 toMatchSnapshot 调用到微任务队列的末尾.setTimeout(..., 0) 或 setImmediate 也可以使用，但我发现 await Promise.resolve() 更容易识别为下面的所有内容都即将结束"

[UPD] 固定片段:.toJSON 必须在等待之后，它返回的对象永远不会更新

Component to test

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

Test

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()
})

snapshot only records null, since at the moment of execution I suppose state.slides = null.

Can't put my finger on how to run expectations after axios done fetching the data.

Most of the samples online either use enzyme, or show tests with async functions that return promises. I couldn't find one that would show example only using jest and rendered component.

I tried making test function async, also using done callback, but no luck.

解决方案

in short:

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

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

should do the job

in details: besides you have mocked call to API data is still coming in async way. So we need toMatchSnapshot call goes to end of microtasks' queue. setTimeout(..., 0) or setImmediate will work too but I've found await Promise.resolve() being better recognizable as "everything below is coming to end of queue"

[UPD] fixed snippet: .toJSON must be after awaiting, object it returns will never be updated

这篇关于如何在 axios 在 componentDidMount 中获取数据后拍摄开玩笑的快照?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！