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

Question

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

我遇到了麻烦,弄清楚为什么我无法获得二维背景.也许我的测试配置存在问题？

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

Answer 1

如果安装了node-canvas库，Jest / jsdom可以处理canvas元素。

因此卸载jest-canvas-mock（如果已安装）并安装canvas：

npm uninstall jest-canvas-mock
npm i --save-dev canvas

Answer 2

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

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

jsdom包括支持使用canvas包来<canvas>使用canvas API 扩展任何元素.为了使这项工作,您需要将canvas作为依赖项包含在项目中,作为jsdom的同行.如果jsdom可以找到canvas包,它将使用它,但如果它不存在,那么<canvas>元素将表现得像<div>s.

或者,您可以使用像Karma这样的基于浏览器的测试运行器替换Jest .无论如何,Jest 非常多.

Answer 3

对于那些使用create-react-app寻找示例的人

安装

yarn add --dev jest-canvas-mock

创建一个新的${rootDir}/src/setupTests.js与

import 'jest-canvas-mock';

Answer 4

对于我的用例，我做了像这样的简单猴子修补

beforeEach(() => {
    const createElement = document.createElement.bind(document);
    document.createElement = (tagName) => {
        if (tagName === 'canvas') {
            return {
                getContext: () => ({}),
                measureText: () => ({})
            };
        }
        return createElement(tagName);
    };
});

无需安装canvas-prebuilt 或sinon。