对于那些使用 create-react-app 寻找示例的人

安装

yarn add --dev jest-canvas-mock

创建一个新${rootDir}/src/setupTests.js的

import 'jest-canvas-mock';

这是因为您的测试不在真正的浏览器中运行。Jestjsdom用于模拟 DOM 的必要部分，以便能够在 Node 中运行测试，从而避免浏览器通常会执行的样式计算和渲染。这很酷，因为这可以加快测试速度。

另一方面，如果您需要在组件中使用浏览器 API，这比在浏览器中更困难。幸运的是，jsdom支持 canvas。你只需要配置它：

jsdom 支持使用画布包来扩展任何<canvas>带有画布 API 的元素。要完成这项工作，您需要将 canvas 作为依赖项包含在您的项目中，作为 jsdom 的对等项。如果 jsdom 可以找到 canvas 包，它将使用它，但如果它不存在，则<canvas>元素的行为类似于<div>s。

或者，您可以将 Jest 替换为一些基于浏览器的测试运行程序，例如Karma。无论如何，Jest 是相当有缺陷的。

如果安装了库节点画布， Jest / jsdom 可以处理画布元素。

因此卸载jest-canvas-mock（如果已安装）并安装canvas：

npm uninstall jest-canvas-mock
npm i --save-dev canvas

对于我的用例，我做了这样的简单猴子补丁

beforeEach(() => {
    const createElement = document.createElement.bind(document);
    document.createElement = (tagName) => {
        if (tagName === 'canvas') {
            return {
                getContext: () => ({}),
                measureText: () => ({})
            };
        }
        return createElement(tagName);
    };
});

无需安装 canvas-prebuilt 或 sinon。

我有完全相同的问题。我正在部署到 gitlab ci 来运行我的测试，并且由于 npm canvas 需要安装 Cairo，因此使用它不是一个可行的选择。

我真正想做的就是通过 Jest 模拟实现，这样它就不会真正尝试创建真实的上下文。这是我解决它的方法：

添加到 package.json

"jest": {
  "setupFiles": ["./tests/setup.js"],
}

测试/setup.js

import sinon from 'sinon';

const createElement = global.document.createElement;
const FAKECanvasElement = {
  getContext: jest.fn(() => {
    return {
      fillStyle: null,
      fillRect: jest.fn(),
      drawImage: jest.fn(),
      getImageData: jest.fn(),
    };
  }),
};

/**
 * Using Sinon to stub the createElement function call with the original method
 * unless we match the 'canvas' argument.  If that's the case, return the Fake 
 * Canvas object.
 */
sinon.stub(global.document, 'createElement')
  .callsFake(createElement)
  .withArgs('canvas')
  .returns(FAKECanvasElement);