要测试的组件
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 完成获取数据后如何运行期望。
大多数在线示例要么使用 enzyme ,要么显示具有返回 promise 的异步函数的测试。我找不到一个只使用 jest 和渲染组件来显示示例的程序。
我尝试制作测试函数 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
必须在等待之后,它返回的对象永远不会更新
关于javascript - axios 在 componentDidMount 中获取数据后如何拍摄快照?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53545881/