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

Question

我正在使用Jest为使用canvas元素的组件编写测试.当我运行看起来像这样的测试时,我一直收到错误.

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

根据我的理解,Jest使用jsdom进行测试,如果安装了canvas或canvas预构建的包,jsdom与canvas兼容.

我尝试过安装这些软件包,但都没有解决错误.我认为唯一可能出错的是jsdom无法找到画布或画布预建包.有没有人知道一种方法来修复此错误或测试,以查看jsdom是否找到其他包？非常感谢!

Answer 1

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

import 'jest-canvas-mock';

Answer 2

您可以在jest安装脚本中创建自己的函数模拟

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

Answer 3

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

Stack Overflow 上有一些问题可以通过“只需安装 jest-canvas-mock，这里是如何执行‘setupFiles’”来回答。如果这些答案包含一个完整的示例测试，那将非常有帮助......只需一个简单的测试就可以了，但可以显示 **如何** jest-canvas-mock 的使用方式。 (2认同)

Answer 4

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

并添加此配置package.json

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

Answer 5

您可以将其创建为模拟，并且不安装新包：

HTMLCanvasElement.prototype.getContext = jest.fn();

Answer 6

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

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