在我的Jest单元测试中,我正在使用ColorPicker渲染组件。该ColorPicker组件创建一个canvas对象和2d上下文,但返回'undefined'则抛出错误"Cannot set property 'fillStyle' of undefined"
ColorPicker
'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 }
这是因为您的测试未在真正的浏览器中运行。Jest jsdom用于模拟DOM的必要部分,以便能够在Node中运行测试,从而避免了样式计算和呈现浏览器通常会执行的渲染。这很酷,因为这可以使测试更快。
jsdom
另一方面,如果您的组件中需要浏览器API,则比在浏览器中困难。幸运的是,jsdom已经支持canvas了。您只需要配置它:
jsdom支持使用canvas包<canvas>通过canvas API 扩展任何元素。为了使这项工作有效,您需要将canvas作为依赖项包含在项目中,作为jsdom的对等体。如果jsdom可以找到canvas包,它将使用它,但是如果不存在,则<canvas>元素的行为将类似于<div>s。
<canvas>
<div>
另外,您可以用一些基于浏览器的测试运行程序(例如Karma)替换Jest 。笑话反正还是越野车。