如何在Jest中为我的测试添加<canvas>支持？

Adgezaza

在我的Jest单元测试中，我正在使用ColorPicker渲染组件。该ColorPicker组件创建一个canvas对象和2d上下文，但返回'undefined'会抛出错误"Cannot set property 'fillStyle' of undefined"

if (typeof document == 'undefined') return null; // Dont Render On Server
var canvas = document.createElement('canvas'); 
canvas.width = canvas.height = size * 2;
var ctx = canvas.getContext('2d'); // returns 'undefined'
ctx.fillStyle = c1; // "Cannot set property 'fillStyle' of undefined"

我在弄清楚为什么我无法获得2D上下文时遇到了麻烦。我的测试配置可能有问题吗？

"jest": {
  "scriptPreprocessor": "<rootDir>/node_modules/babel-jest",
  "unmockedModulePathPatterns": [
    "<rootDir>/node_modules/react",
    "<rootDir>/node_modules/react-dom",
    "<rootDir>/node_modules/react-addons-test-utils",
    "<rootDir>/node_modules/react-tools"
  ],
  "moduleFileExtensions": [
    "jsx",
    "js",
    "json",
    "es6"
  ],
  "testFileExtensions": [
    "jsx"
  ],
  "collectCoverage": true
}

mik01aj

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

另一方面，如果您的组件中需要浏览器API，则比在浏览器中困难。幸运的是，jsdom已经支持canvas了。您只需要配置它：

jsdom支持使用canvas包<canvas>通过canvas API扩展任何元素。为了使这项工作有效，您需要将canvas作为依赖项包含在项目中，作为jsdom的对等体。如果jsdom可以找到canvas包，它将使用它，但是如果不存在，那么<canvas>元素的行为将类似于<div>s。