javascript - react-scripts 测试引发与被测组件无关的 TypeError

Question

我正在测试一个使用 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 会从正在导入的内部库中引发随机错误，我应该如何测试我的项目？有没有办法跳过与导入相关的错误？

Answer 1

我也看到了这个问题。对我来说，事实证明 Jest 不支持 Canvas 是个问题，除非您选择加入。此处列出的答案: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 构建的。