反应测试库：无法从给定项目获取上下文

Question

我有这个组件，它使用react-chartjs-2来渲染Doughnut图表：

const CompliancyChart = ({data}): JSX.Element => {
...
   return (
     <ChartStyled>
          {chartPlugins && chartData && (
            <Doughnut
              aria-label="Compliancy Chart"
              data={chartData}
              options={chartOptions}
              plugins={chartPlugins}
            />
          )}
        </ChartStyled>
    );
};

我有一个该组件的测试文件，其中包含以下断言：

describe('Chart component', () => {
  afterEach(() => {
    cleanup();
  });

  test('should render without errors', async () => {
    render(<CompliancyChart data={mockCompliancyChartData} />, {});
    const compliancyChart = await screen.findByRole('img', {
      name: 'Compliancy Chart',
    });
    expect(compliancyChart).toBeDefined();
  });
});

该测试工作正常，但我不断在测试控制台中收到此错误：

Failed to create chart: can't acquire context from the given item

我在网上找到的唯一解决方案是使用：

jest.mock('react-chartjs-2', () => ({
      Doughnut: () => null,
    }))

在这种情况下，我的测试失败，因为我无法canvas在屏幕容器内部进行测试：（https://github.com/reactchartjs/react-chartjs-2/issues/155#issuecomment-821322545）

我该如何解决这个问题？

Answer 1

由于Jest使用了jsdom，因此有些浏览器 API 在此环境中不可用。您可能会收到此错误

无法创建图表：无法从给定项目获取上下文

因为HTMLCanvasElement.getContext()不存在。

canvas您可以通过安装为开发依赖项来消除该错误。如果 Jsdom 作为依赖项包含在您的项目中，则支持使用此库。请参阅画布支持

npm i canvas --save-dev

如果您收到与 相关的错误ResizeObserver，在这种情况下您可以模拟它并且您的测试将运行良好。

window.ResizeObserver = function () {
  return {
    observe: jest.fn(),
    unobserve: jest.fn(),
    disconnect: jest.fn(),
  };
};