Reactjs 单元测试组件使用；ChartJS"；在TypeScript中为React Error:TypeError:cannotreadproperty'；getContext'；空的

我正在尝试单元测试（

RiskChartComponent.spec.ts

）我的应用程序中名为

RiskChartComponent.tsx

）的React组件：

import React from 'react';
import { shallow } from 'enzyme';
import RiskChartComponent from '../RiskChartComponent/RiskChartComponent'

describe('RiskChartComponent', () => {

    it('should render successfully', () => {
        const props = { xAxisArray: [4, 3, 2, 1, 0, -1, -2, -3, -4], yAxisArray: [-491.11, -392.11, -305.38, -140.15, -6.74, 6.18, 44.77, -12.04, -190.24], label: 'Delta', context: '2d'};

        const wrapped = shallow(<RiskChartComponent{...props} />, { lifecycleExperimental: true });

        expect(wrapped).toBeTruthy();
    });
});

---

在我最初的研究中，Jest似乎使用

jsdom

模拟DOM的必要部分，以便能够在节点中运行测试，从而避免了浏览器通常会进行的样式计算和呈现。然后，我是否需要在这个单元测试中模拟

Chart.js

，以使其正常工作？在这种情况下，我该怎么做呢？

经过一些研究。。。。我将以下代码添加到我的

setupJest.ts

文件中：

jest.mock('chart.js', () => ({
    Chart: () => null
  }));

然后在我的

RiskChartComponent.spec.ts

文件中，我删除了传入的

2d

的

context

参数，并将

lifecycleExperimental:true

更新为

disableLifecycleMethods:true

。我通过了考试：

import React from 'react';
import { shallow } from 'enzyme';
import RiskChartComponent from '../RiskChartComponent/RiskChartComponent';

describe('RiskChartComponent', () => {

    it('should render successfully', () => {

        const currentContext = React.createRef().current;
        const props = { xAxisArray: [4, 3, 2, 1, 0, -1, -2, -3, -4], yAxisArray: [-491.11, -392.11, -305.38, -140.15, -6.74, 6.18, 44.77, -12.04, -190.24], label: 'Delta'};

        const wrapped = shallow(<RiskChartComponent{...props} />, { disableLifecycleMethods: true });

        expect(wrapped).toBeTruthy();
    });
});

从“React”导入React；
从“酶”导入{shall}；
从“../RiskChartComponent/RiskChartComponent”导入RiskChartComponent；
描述（'RiskChartComponent'，（）=>{
它（'应成功渲染'，（）=>{
const currentContext=React.createRef（）.current；
const props={xAxisArray:[4,3,2,1,0，-1，-2，-3，-4]，yAxisArray:[-491.11，-392.11，-305.38，-140.15，-6.74,6.18,44.77，-12.04，-190.24]，标签：'Delta'}；
const wrapped=shallow（，{disableLifecycleMethods:true}）；
expect（wrapped.toBeTruthy（）；
});
});

然后我是否需要在这个单元测试中模拟Chart.js以使其正常工作对大多数第三方LIB需要在单元测试中模拟。特别是那些依赖真实DOM的，而Jest环境不能提供的。@EstusFlask，根据其中一些评论。。。如果我使用的是

shall

，我就不需要模仿了？在这种情况下，如何模拟

Chart.Js

？完全取决于具体情况。您引用了React lib中的一个问题，其中它的组件实际上不会用shallow呈现，它不适用于您的组件，因为您直接使用图表。基本上，您需要以允许测试通过的最小方式模拟图表API。即，使

图表

成为间谍，并模拟

chartRef.current

以拥有

getContext

间谍方法。您也可以尝试jest canvas mock，但不能保证库不会在其他地方失败。@我尝试将以下内容添加到我的

setupJest.js

文件：

jest.mock（'chart.js'，（）=>（{chart:（）=>null}））这个.chartRef.current.getContent（“2d”）失败行仍然存在以下错误：
TypeError:无法读取null的属性“getContext”
@EstusFlask我找到了它。。。除了我添加的模拟代码外，我还需要将
lifecycleExperimental:true
更新为
disableLifecycleMethods:true
。尝试了这些步骤对我无效
import React from 'react';
import { shallow } from 'enzyme';
import RiskChartComponent from '../RiskChartComponent/RiskChartComponent';

describe('RiskChartComponent', () => {

    it('should render successfully', () => {

        const currentContext = React.createRef().current;
        const props = { xAxisArray: [4, 3, 2, 1, 0, -1, -2, -3, -4], yAxisArray: [-491.11, -392.11, -305.38, -140.15, -6.74, 6.18, 44.77, -12.04, -190.24], label: 'Delta'};

        const wrapped = shallow(<RiskChartComponent{...props} />, { disableLifecycleMethods: true });

        expect(wrapped).toBeTruthy();
    });
});