Question

在测试呈现几个文本字段，图标和图表的组件时遇到问题。

我正在<canvas>上绘制图表，为此，我使用了react钩子useRef，所有工作都很漂亮。

我的问题是当我尝试在单元测试中渲染组件时。为此，我使用了笑话和酶，所以这些是此过程中涉及的文件：

反应组件

import React, { useEffect, useRef } from 'react';
import Chart from 'chart.js';
import { useWidgetConfiguration } from '../utils/SummitHooks';

const styles = {
  canvas: { padding: '30px 30px' },
};

const widgetProperties = {
  title: { type: 'string', default: '' },
  percent: { type: 'number' },
};

const DougnutWithTextWidget = props => {
  const { widgetConf } = props;
  const chartRef = useRef();

  const widgetDisplayValues = useWidgetConfiguration(
    widgetProperties,
    widgetConf,
  );

  useEffect(() => {
    if (chartRef.current) {
      new Chart(chartRef.current.getContext('2d'), {
        type: 'doughnut',
        data: {
          labels: ['', widgetDisplayValues.title],
          datasets: [
            {
              data: [
                parseInt(100 - parseInt(widgetDisplayValues.percent)),
                parseInt(widgetDisplayValues.percent),
              ],
              backgroundColor: ['#f4f4f4', '#377d28'],
            },
          ],
          text: widgetDisplayValues.title,
        },
        options: {
          animation: {
            animateScale: true,
            animateRotate: true,
          },
          cutoutPercentage: 75,
          tooltips: false,
        },
      });
    }
  }, [widgetDisplayValues, chartRef]);

  Chart.defaults.global.legend = false;

  return (
    <div className='uk-container-expand'>
      <div className='widget-account-health-outer'>
        <div className='widget-account-health-inner'>
          <h1 className='uk-text-center'>{widgetDisplayValues.percent}%</h1>
          <span className='uk-h5 uk-text-bold'>
            {widgetDisplayValues.title}
          </span>
        </div>
        <canvas
          ref={chartRef}
          height='400'
          width='400'
          style={styles.canvas}
        ></canvas>
      </div>
    </div>
  );
};

export default DougnutWithTextWidget;

测试文件

import React from 'react';
import { mount } from 'enzyme';
import DougnutWithTextWidget from '../components/organisms/DougnutWithTextWidget';

describe('Testing the Atomic Component <AccountBarChartWidget />', () => {
  let atomicComponent;

  const widgetConf = {
    title: 'GOALS HEALTH',
    percent: 57,
    chartType: 'doughnut',
    linkTo: '',
  };

  beforeAll(() => {
    atomicComponent = mount(<DougnutWithTextWidget widgetConf={widgetConf} />);
  });

  afterAll(() => {
    atomicComponent.unmount();
  });

  describe('Validate that the Atomic Component is displaying the data provided as wdgetConf', () => {
    it('Ensure that the right amount has been displayed', () => {
      // A simple test just for making sure the component is rendering without any problem
      expect(2 + 2).toEqual(4);
    });
  });
});

此刻，当我使用shallow或render时，测试工作正常，但我的目标是实际mount组件以确保已绘制图表。

这是我遇到的错误：

 Testing the Atomic Component <AccountBarChartWidget />
    Validate that the Atomic Component is displaying the data provided as wdgetConf
      ✕ Ensure that the right amount has been displayed (3ms)

  ● Testing the Atomic Component <AccountBarChartWidget /> › Validate that the Atomic Component is displaying the data provided as wdgetConf › Ensure that the right amount has been displayed

    TypeError: Cannot read property 'length' of null

      24 |   useEffect(() => {
      25 |     if (chartRef.current) {
    > 26 |       new Chart(chartRef.current.getContext('2d'), {
         |       ^
      27 |         type: 'doughnut',
      28 |         data: {
      29 |           labels: ['', widgetDisplayValues.title],

      at Object.acquireContext (node_modules/chart.js/dist/Chart.js:7739:19)
      at Chart.construct (node_modules/chart.js/dist/Chart.js:9307:26)
      at new Chart (node_modules/chart.js/dist/Chart.js:9294:7)
      at DougnutWithTextWidget (src/components/organisms/DougnutWithTextWidget.js:26:7)
      at commitHookEffectList (node_modules/react-dom/cjs/react-dom.development.js:22030:26)
      at commitPassiveHookEffects (node_modules/react-dom/cjs/react-dom.development.js:22064:11)
      at HTMLUnknownElement.callCallback (node_modules/react-dom/cjs/react-dom.development.js:336:14)
      at Object.invokeGuardedCallbackDev (node_modules/react-dom/cjs/react-dom.development.js:385:16)
      at invokeGuardedCallback (node_modules/react-dom/cjs/react-dom.development.js:440:31)
      at flushPassiveEffectsImpl (node_modules/react-dom/cjs/react-dom.development.js:25392:7)
      at unstable_runWithPriority (node_modules/scheduler/cjs/scheduler.development.js:697:12)
      at runWithPriority$2 (node_modules/react-dom/cjs/react-dom.development.js:12149:10)
      at flushPassiveEffects (node_modules/react-dom/cjs/react-dom.development.js:25361:12)
      at Object.<anonymous>.flushWork (node_modules/react-dom/cjs/react-dom-test-utils.development.js:1041:10)
      at Object.act (node_modules/react-dom/cjs/react-dom-test-utils.development.js:1155:9)
      at wrapAct (node_modules/enzyme-adapter-react-16/src/ReactSixteenAdapter.js:354:13)
      at Object.render (node_modules/enzyme-adapter-react-16/src/ReactSixteenAdapter.js:423:16)
      at new ReactWrapper (node_modules/enzyme/src/ReactWrapper.js:115:16)
      at mount (node_modules/enzyme/src/mount.js:10:10)
      at Object.beforeAll (src/__tests__/dougutWithTextWidget.test.js:16:23)

有人尝试测试类似的东西并且可以指出正确的方向吗？

Answer 1

我终于能够破解这个问题。我需要支持测试文件中的<canvas>标记，而仅仅导入jest-canvas-mock就可以了。

使用useRef（），笑话和酶的单元测试异常

1 个答案: