如何添加<canvas>支持我在 Jest 中的测试吗? [英] How to add <canvas> support to my tests in Jest?

问题描述

在我的 Jest 单元测试中，我正在渲染一个带有 ColorPicker.ColorPicker 组件创建一个画布对象和 2d 上下文，但返回 'undefined' 会引发错误 Cannot set property 'fillStyle' of undefined"

if (typeof document == 'undefined') return null;//不要在服务器上渲染var canvas = document.createElement('canvas');canvas.width = canvas.height = 尺寸 * 2;var ctx = canvas.getContext('2d');//返回未定义"ctx.fillStyle = c1;//"无法设置未定义的属性 'fillStyle'"

我无法弄清楚为什么我无法获得 2d 上下文.也许我的测试配置有问题?

玩笑":{"scriptPreprocessor": "/node_modules/babel-jest",unmockedModulePathPatterns":["/node_modules/react","/node_modules/react-dom","/node_modules/react-addons-test-utils",/node_modules/react-tools"],模块文件扩展名":["jsx","js","json",es6"],测试文件扩展名":[jsx"],collectCoverage":真}

解决方案

这是因为您的测试未在真实浏览器中运行.Jest 使用 jsdom 来模拟 DOM 的必要部分，以便能够在 Node 中运行测试，从而避免浏览器通常会进行的样式计算和渲染.这很酷，因为这可以加快测试速度.

另一方面，如果您需要在组件中使用浏览器 API，则比在浏览器中更困难.幸运的是，jsdom 支持画布.你只需要配置它:

<块引用>

jsdom 支持使用 canvas 包来扩展任何 元素与画布 API.要完成这项工作，您需要将 canvas 作为依赖项包含在您的项目中，作为 jsdom 的对等项.如果 jsdom 可以找到画布包，它将使用它，但如果它不存在，则 元素将表现得像

s.>

或者，您可以将 Jest 替换为一些基于浏览器的测试运行程序，例如 Karma.无论如何，Jest 很糟糕.

In my Jest unit test I am rendering a component with a ColorPicker. The ColorPicker component creates a canvas object and 2d context but returns 'undefined' which throws an error "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"

I'm having troubles figuring out why I can't get a 2d context. Maybe there an issue with my test config?

"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
}

解决方案

It's because your test doesn't run in a real browser. Jest uses jsdom for mocking the necessary parts of the DOM to be able to run the tests in Node, thus avoiding style calculation and rendering that a browser would normally do. This is cool because this makes tests fast.

On the other hand, if you need browser APIs in your components, it's more difficult than in the browser. Luckily, jsdom has support for canvas. You just have to configure it:

jsdom includes support for using the canvas package to extend any <canvas> elements with the canvas API. To make this work, you need to include canvas as a dependency in your project, as a peer of jsdom. If jsdom can find the canvas package, it will use it, but if it's not present, then <canvas> elements will behave like <div>s.

Alternatively, you could replace Jest with some browser-based test runner like Karma. Jest is pretty buggy anyway.

这篇关于如何添加&lt;canvas&gt;支持我在 Jest 中的测试吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！