用jest测试Echarts react组件，EchartElement为null

Question

正在对具有多个嵌套子组件的组件进行 snapchot 测试，其中一个包含 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，这使得测试失败。我需要以某种方式嘲笑这个吗？听起来不对...它期望的所有属性也在测试模式下正确传递...我检查过...

是否有一些configuration/setup我需要让 Echarts 与 Jest 一起工作？

Answer 1

是的，我不得不模拟 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()
})

每次我运行进入错误运行测试时，我都会去调用方法或属性的地方，记录控制台，查看在浏览器并在模拟数据中设置数据。也许有更好的方法来做到这一点，但它已经完成了......

Answer 2

事实证明，我的第一个答案最终对我不起作用...我保留了运行测试并修复了它抱怨的任何问题，但总有其他问题...

所以在同事的帮助下，解决方案是通过模拟触发渲染的函数来阻止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()
})

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

用jest测试Echarts react组件，EchartElement为null

Testing Echarts react component with jest, EchartElement is null

reactjs

jestjs

echarts