用玩笑测试Echarts react组件，EchartElement为null答案

【问题标题】：Testing Echarts react component with jest, EchartElement is null用玩笑测试Echarts react组件，EchartElement为null
【发布时间】：2019-02-28 08:56:47
【问题描述】：

对具有多个嵌套子组件的组件进行快照测试，其中一个包含 Echart（条形图）。在浏览器中渲染时，EchartElement 被设置为图表 dom 元素：

 <div class="echarts-for-react " _echarts_instance_="ec_1551342959315" size-sensor-id="1" style="height: 360px; -webkit-tap-highlight-color: transparent; user-select: none; position: relative; background: transparent;">
...
</div>

但是运行测试，它的 null，这使得测试失败。我需要以某种方式模拟这个吗？听起来不对...它所期望的所有属性也在测试模式下正确传递...我检查了...

是否需要一些配置/设置才能使 Echarts 与 Jest 一起使用？

【问题讨论】：

标签： reactjs jestjs echarts

【解决方案1】：

结果我的第一个答案最终对我不起作用...我一直在运行测试并修复它所抱怨的任何问题，但总是有其他问题...

因此在同事的帮助下，解决方案是通过模拟触发渲染的函数来阻止 React Echarts 调用 Echarts。

let spy: any

beforeAll(() => {
    spy = jest.spyOn(echarts, 'getInstanceByDom').mockImplementation(() => {
        return {
            hideLoading: jest.fn(),
            setOption: jest.fn(),
            showLoading: jest.fn()
        }
    })
})
afterAll(() => {
    spy.mockRestore()
})
it('Renders show correctly', () => {
    const tree = renderer
        .create(
            <Show />
        )
        .toJSON()
    expect(tree).toMatchSnapshot()
})

在我们的例子中，我们对实际测试画布渲染部分不感兴趣，所以这对我们有用。

【讨论】：

【解决方案2】：

是的，我不得不模拟 ref 对象：

function createNodeMock(element: any) {
    return {
        getSomething: jest.fn(() => 'pizza'),
        setSomething: jest.fn(),
        property: null,
    }
}
it('Renders show correctly', () => {
    const options = { createNodeMock }
    const tree = renderer
        .create(
            <Show/>,
            options
        )
        .toJSON()
    expect(tree).toMatchSnapshot()
})

每次我在运行测试时遇到错误，我都会去调用方法或属性的地方，记录控制台，查看浏览器中的值是什么，然后在 mockData 中设置数据。也许有更好的方法可以做到这一点，但它完成了......

【讨论】：