Question

对具有多个嵌套子组件的组件进行快照测试，其中一个子组件包含一个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一起工作，是否需要一些配置/设置？

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渲染部分不感兴趣，因此对我们有用。

测试Echarts具有开玩笑的反应组件，EchartElement为null

2 个答案: