单元测试由于未实现.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 setup script

中创建自己的函数模拟

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

Answer 3

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

Answer 4

以上两个工作都得到了答案。但是，只是想在create-react-app的情况下添加它，它不支持jest-canvas-mock的package.json中jest conf所需的“ setupFiles”。

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

Answer 5

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