由于 .getContext() 未实现，单元测试引发错误

Question

我正在使用 Jest 为使用 canvas 元素的组件编写测试。当我运行我的测试看起来像这样时，我总是收到错误。

Error: Not implemented: HTMLCanvasElement.prototype.getContext (without installing the canvas npm package)

根据我的理解，Jest 使用 jsdom 进行测试，如果您安装 canvas 或 canvas-prebuilt 软件包，jsdom 与 canvas 兼容。

我已经尝试安装这些软件包中的每一个，但都没有解决错误。我认为唯一可能出错的地方是 jsdom 找不到 canvas 或 canvas-prebuilt 包。有谁知道修复此错误或测试 jsdom 是否找到其他包的方法？非常感谢！

Answer 1

您可以在 jest setup script

中创建自己的函数模拟

HTMLCanvasElement.prototype.getContext = () => { 
  // return whatever getContext has to return
};

Answer 2

我的 Jest 测试遇到了类似的问题，并通过安装 jest-canvas-mock.

解决了这个问题

Answer 3

以上两个答案都有效。但是，只是想补充一点，在 create-react-app 的情况下，它不支持 package.json 中 jest conf 要求的 'setupFiles' for jest-canvas-mock.

我通过在每个调用 canvas 元素的测试文件中添加 import 语句来解决这个问题（在我的例子中是 3）。然后，我将导入语句移至 setupTests.js 文件并删除了该要求。

Answer 4

我的团队正在使用 create-react-app，我们之前通过添加 npm 包 jest-canvas-mock 解决了这个问题。现在升级到 react-scripts 3.4.1 后，我们还必须向我们的 src/setupTests.ts 文件添加一个特定的导入：

import 'jest-canvas-mock';

Answer 5

我在使用 react-scripts 3.0.1 时遇到了同样的问题，并通过将 jest-canvas-mock 作为 dev 依赖项安装并将其导入 (import 'jest-canvas-mock') 到我的 app.test.js 文件（我从那里得到那个错误）只是因为在 setupTests.js 上导入它会不必要地在每个测试文件中导入包。

Answer 6

我安装jest-canvas-mock

解决了

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

并在 package.json

上添加此配置

{
  "jest": {
    "setupFiles": [
      "jest-canvas-mock"
    ],
  }
}

由于 .getContext() 未实现，单元测试引发错误

unit test raises error because of .getContext() is not implemented

javascript

canvas

jestjs

jsdom