TypeError: Cannot set property 'font' of null at Object.measureText (node_modules/zrender/lib/contain/text.js:371:18)

[maoyr]

One-line summary [问题简述]

使用 Jest + Enzyme 测试自己用 react 封装的 ECharts，option 是简单的柱状图，shallow 不报错，mount 报错，测试无法进行。

Version & Environment [版本及环境]

• ECharts version [ECharts 版本]: "echarts": "^3.7.0"
• Browser version [浏览器类型和版本]: chrome
• OS Version [操作系统类型和版本]: win7

Expected behaviour [期望结果]

请问要怎么解决？

ECharts option [ECharts配置项]

option = {
title: {
    text: 'ECharts 入门示例'
  },
  tooltip: {},
  legend: {
    data:['销量']
  },
  xAxis: {
    data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
  },
  yAxis: {},
  series: [{
    name: '销量',
    type: 'bar',
    data: [5, 20, 36, 10, 10, 20]
  }]
}

Other comments [其他信息]

import React from 'react';
import { shallow, mount } from 'enzyme';
import sinon from 'sinon';
import ECharts from 'components/charts/echarts/echarts';
import { option} from 'mock/charts/echarts';

describe( 'Feature', () => {
  let stub;

  beforeEach( () => {
    stub = sinon.stub( console, 'error' );
  } );

  afterEach( () => {
    stub.restore();
  } );

  describe( 'ECharts.propTypes Test', () => {
    /* option*/
    it( 'option is object', () => {
      mount( <ECharts option={ option }/> );
      expect( stub.calledOnce ).toBe( false );
    } );

  } );
} );

报错信息：

TypeError: Cannot set property 'font' of null

  at Object.measureText (node_modules/zrender/lib/contain/text.js:371:18)
  at getTextWidth (node_modules/zrender/lib/contain/text.js:35:42)
  at getLineHeight (node_modules/zrender/lib/contain/text.js:360:16)
  at parsePlainText (node_modules/zrender/lib/contain/text.js:386:26)
  at getPlainTextRect (node_modules/zrender/lib/contain/text.js:66:28)
  at Object.getTextRect [as getBoundingRect] (node_modules/zrender/lib/contain/text.js:62:15)
  at Text.getBoundingRect (node_modules/zrender/lib/graphic/Text.js:71:40)
  at ExtendedClass.render (node_modules/echarts/lib/component/title.js:104:35)
  at ECharts.<anonymous> (node_modules/echarts/lib/echarts.js:1246:27)
  at Array.forEach (native)
  at each (node_modules/zrender/lib/core/util.js:272:17)
  at ECharts.doRender (node_modules/echarts/lib/echarts.js:1244:9)
  at ECharts.update (node_modules/echarts/lib/echarts.js:685:22)
  at ECharts.prepareAndUpdate (node_modules/echarts/lib/echarts.js:805:34)
  at ECharts.Object.<anonymous>.echartsProto.setOption (node_modules/echarts/lib/echarts.js:286:44)
  at ECharts.componentDidMount (src/components/charts/echarts/echarts.jsx:93:18)
  at node_modules/react-dom/lib/ReactCompositeComponent.js:264:25
  at measureLifeCyclePerf (node_modules/react-dom/lib/ReactCompositeComponent.js:75:12)
  at node_modules/react-dom/lib/ReactCompositeComponent.js:263:11
  at CallbackQueue.notifyAll (node_modules/react-dom/lib/CallbackQueue.js:76:22)
  at ReactReconcileTransaction.close (node_modules/react-dom/lib/ReactReconcileTransaction.js:80:26)
  at ReactReconcileTransaction.closeAll (node_modules/react-dom/lib/Transaction.js:209:25)
  at ReactReconcileTransaction.perform (node_modules/react-dom/lib/Transaction.js:156:16)
  at batchedMountComponentIntoNode (node_modules/react-dom/lib/ReactMount.js:126:15)
  at ReactDefaultBatchingStrategyTransaction.perform (node_modules/react-dom/lib/Transaction.js:143:20)
  at Object.batchedUpdates (node_modules/react-dom/lib/ReactDefaultBatchingStrategy.js:62:26)
  at Object.batchedUpdates (node_modules/react-dom/lib/ReactUpdates.js:97:27)
  at Object._renderNewRootComponent (node_modules/react-dom/lib/ReactMount.js:319:18)
  at Object._renderSubtreeIntoContainer (node_modules/react-dom/lib/ReactMount.js:401:32)
  at Object.render (node_modules/react-dom/lib/ReactMount.js:422:23)
  at Object.renderIntoDocument (node_modules/react-dom/lib/ReactTestUtils.js:91:21)
  at renderWithOptions (node_modules/enzyme/build/react-compat.js:200:24)
  at new ReactWrapper (node_modules/enzyme/build/ReactWrapper.js:94:59)
  at mount (node_modules/enzyme/build/mount.js:19:10)
  at Object.<anonymous> (test/components/charts/echarts/feature.test.js:24:25)
  at Promise.resolve.then.el (node_modules/p-map/index.js:42:16)
  at process._tickCallback (internal/process/next_tick.js:109:7)

[TBBle]

Turns out it's hitting this in jsdom's HTMLCanvasElement-impl.js

notImplemented(
      "HTMLCanvasElement.prototype.getContext (without installing the canvas npm package)",
      this._ownerDocument._defaultView
    );

See jestjs/jest#5168

For some reason, the notImplemented output isn't appearing anywhere for me, so this wasn't reported in the output logs.

The solution is to install something like canvas, canvas-prebuilt or jest-canvas-mock. That last option needs to be (simply) integrated into your project.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[JunlinZhu-Tommy]

Any updates on this?