小编典典

如何添加 支持我在Jest中的测试?

reactjs

在我的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
}

阅读 232

收藏
2020-07-22

共1个答案

小编典典

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

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

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

另外,您可以用一些基于浏览器的测试运行程序(例如Karma)替换Jest
。笑话反正还是越野车

2020-07-22