react-scripts 测试引发与正在测试的组件无关的 TypeError答案

【问题标题】：react-scripts test raises TypeError unrelated to the component being testedreact-scripts 测试引发与正在测试的组件无关的 TypeError
【发布时间】：2019-07-08 23:54:54
【问题描述】：

我正在测试一个使用ag-grid 的组件，但测试套件在导入它的许可证时失败，并且它与正在测试的组件无关。

import React from 'react';
import RelatorioVendas from './RelatorioVendas';
import { configure, shallow } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

// tslint:disable-next-line:no-any
configure({ adapter: new Adapter() });

test('renders the "RelatorioVendas" component.', () => {
    const wrapper = shallow(
        <RelatorioVendas/>
    );
    wrapper.simulate("gridReady");
    expect(wrapper).toMatchSnapshot();
});

错误：

src/routes/Dashboard/RelatorioVendas.test.js
  ● Test suite failed to run

    TypeError: Cannot read property 'measureText' of null

      35 | import ValidationService from '../../services/ValidationService';
      36 |
    > 37 | import { LicenseManager } from "ag-grid-enterprise";
         | ^
      38 | LicenseManager.setLicenseKey("***********");
      39 |
      40 | class RelatorioVendas extends Component {

      at node_modules/ag-grid-enterprise/dist/lib/charts/canvas/hdpiCanvas.js:258:45
      at Object.<anonymous> (node_modules/ag-grid-enterprise/dist/lib/charts/canvas/hdpiCanvas.js:264:2)
      at Object.<anonymous> (node_modules/ag-grid-enterprise/dist/lib/charts/scene/scene.js:4:20)
      at Object.<anonymous> (node_modules/ag-grid-enterprise/dist/lib/charts/chart/chart.js:4:15)
      at Object.<anonymous> (node_modules/ag-grid-enterprise/dist/lib/charts/chart/cartesianChart.js:17:15)
      at Object.<anonymous> (node_modules/ag-grid-enterprise/dist/lib/charts/chart.js:31:24)
      at Object.<anonymous> (node_modules/ag-grid-enterprise/dist/lib/charts/chartingService.js:15:15)
      at Object.<anonymous> (node_modules/ag-grid-enterprise/dist/lib/menu/menuItemMapper.js:16:25)
      at Object.<anonymous> (node_modules/ag-grid-enterprise/dist/lib/menu/enterpriseMenu.js:29:24)
      at Object.<anonymous> (node_modules/ag-grid-enterprise/main.js:5:24)
      at Object.<anonymous> (src/routes/Dashboard/RelatorioVendas.js:37:1)
      at Object.<anonymous> (src/routes/Dashboard/RelatorioVendas.test.js:2:1)

Test Suites: 1 failed, 1 passed, 2 total
Tests:       1 passed, 1 total
Snapshots:   1 passed, 1 total
Time:        8.645s

如果 jest 会从正在导入的内部库中引发随机错误，我应该如何测试我的项目？有没有办法跳过与导入相关的错误？

【问题讨论】：

Enzyme via Jest 正在尝试渲染您的组件，并且它正在堆叠您的第三方组件以需要堆叠的方式进入的构建块。您更有可能遇到无法找到所需组件的设置问题。查找找到 node_modules 的 Jest 解析器
我也有同样的问题，你解决了吗？

标签： javascript reactjs jestjs enzyme react-scripts

【解决方案1】：

我也看到了这个问题。对我来说，事实证明 Jest 不支持画布是一个问题，除非您选择加入。此处列出的答案：add canvas support for jest 解决了我的问题。希望这会有所帮助！

我的测试失败：

  ● Test suite failed to run

TypeError: Cannot read property 'measureText' of null

> 1 | import Table from 'core-ui/components/Table';
    | ^
  2 | import spinner from '@vestmark/core-ui/source/assets/loading-spinner.gif';
  3 | import React, { Component } from 'react';
  4 | import Util from '@/js/ip-util';

at node_modules/ag-grid-enterprise/dist/lib/charts/canvas/hdpiCanvas.js:309:41
at Object.<anonymous> (node_modules/ag-grid-enterprise/dist/lib/charts/canvas/hdpiCanvas.js:314:2)
at Object.<anonymous> (node_modules/ag-grid-enterprise/dist/lib/charts/scene/scene.js:8:20)
at Object.<anonymous> (node_modules/ag-grid-enterprise/dist/lib/charts/chart/chart.js:8:15)
at Object.<anonymous> (node_modules/ag-grid-enterprise/dist/lib/charts/chart/cartesianChart.js:32:15)
at Object.<anonymous> (node_modules/ag-grid-enterprise/dist/lib/charts/chart.js:54:24)
at Object.<anonymous> (node_modules/ag-grid-enterprise/dist/lib/charts/chartingService.js:24:15)
at Object.<anonymous> (node_modules/ag-grid-enterprise/dist/lib/menu/menuItemMapper.js:26:25)
at Object.<anonymous> (node_modules/ag-grid-enterprise/dist/lib/menu/enterpriseMenu.js:50:24)
at Object.<anonymous> (node_modules/ag-grid-enterprise/main.js:10:24)
at Object.<anonymous> (node_modules/@vestmark/core-ui/source/components/Table/Table.js:1:1)
at Object.<anonymous> (src/main/webapp/content/js/components/Transactions/TransactionsTable/TransactionsTable.js:1:1)
at Object.<anonymous> (src/test/javascript/spec/content/js/components/TransactionsTable.spec.js:6:1)

我的表格组件是使用 Ag-Grid-enterprise 构建的。

【讨论】：