使用 konva 运行测试时出错答案

【问题标题】：Error when running tests while using konva使用 konva 运行测试时出错
【发布时间】：2017-12-18 11:46:27
【问题描述】：

我正在尝试使用konva、react-konva 开始构建 React 应用程序。

我构建了一个基本的反应组件：

import React, { Component } from "react";
import { Stage } from "react-konva";

import Square from "./Square.jsx";

class Map extends Component {
  render() {
    return (
      <Stage height={100} width={100}>
        <Layer>

        </Layer>
      </Stage>
    );
  }
} 
export default Map;

还有一个使用jest的测试：

/* global beforeEach describe expect it */
import { shallow } from "enzyme";
import React from "react";

import Map from "../Map";

function createComponent() {
  const wrapper = shallow(
    <Map />
  );

  return wrapper;
}

describe("Map component test", () => {
  describe("When initializing the component", () => {
    let sut;

    beforeEach(() => {
      sut = createComponent();
    });

    it("it should render a Stage component", () => {
      expect(sut.find("Stage").exists()).toBe(true);
    });
  });
});

当这个测试运行时，我得到以下错误：

TypeError: Cannot read property 'webkitBackingStorePixelRatio' of null

  at node_modules/konva/konva.js:1291:36
  at node_modules/konva/konva.js:1298:7
  at Object.<anonymous> (node_modules/konva/konva.js:1477:3)
  at Object.<anonymous> (node_modules/react-konva/src/react-konva.js:4:13)
  at Object.<anonymous> (src/mapping/Map.jsx:2:19)
  at Object.<anonymous> (src/mapping/MapContainer.js:3:12)
  at Object.<anonymous> (src/App.jsx:3:21)
  at Object.<anonymous> (src/tests/App.spec.js:5:12)

我对@987654328@的依赖：

  "dependencies": {
    "konva": "^1.6.3",
    "prop-types": "^15.5.10",
    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "react-konva": "^1.1.3",
    "react-redux": "^5.0.5",
    "redux": "^3.7.1"
  },
  "devDependencies": {
    "babel-core": "^6.25.0",
    "babel-loader": "^7.1.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "canvas": "^1.6.5",
    "chalk": "^1.1.3",
    "coveralls": "^2.13.1",
    "css-loader": "^0.28.4",
    "enzyme": "^2.8.2",
    "eslint": "^3.19.0",
    "eslint-config-airbnb": "^15.0.1",
    "eslint-plugin-import": "^2.5.0",
    "eslint-plugin-jsx-a11y": "^5.0.3",
    "eslint-plugin-react": "^7.1.0",
    "eslint-watch": "^3.1.2",
    "html-webpack-plugin": "^2.28.0",
    "jest": "^20.0.4",
    "jsdom": "^11.1.0",
    "node-gyp": "^3.6.2",
    "npm-run-all": "^4.0.2",
    "react-test-renderer": "^15.6.1",
    "redux-mock-store": "^1.2.3",
    "style-loader": "^0.18.2",
    "webpack": "^3.0.0"
  }

我确定这与节点设置有关，但我不确定执行此操作的正确方法。有人可以帮忙吗？

【问题讨论】：

你检查过这个github.com/konvajs/konva/issues/200 吗？
是的，我看到了，并安装了 canvas、jsdom、node-gyp 作为 devDependencies。它仍然对我不起作用。

标签： reactjs jestjs konvajs

【解决方案1】：

我通过在我的测试中安装和使用konva-node 来修复它： import Konva from 'konva-node';

在执行任何测试之前，我还必须指定它不在浏览器中使用： Konva.isBrowser = false;

我正在使用以下依赖项： "dependencies": { "axios": "^0.18.0", "konva": "^2.5.0", "react": "^16.5.2", "react-dom": "^16.5.2", "react-konva": "^16.5.2", "react-scripts": "2.0.5" }, "devDependencies": { "chai": "^4.2.0", "enzyme": "^3.7.0", "enzyme-adapter-react-16": "^1.7.0", "konva-node": "^0.5.5", "sinon": "^7.1.1", "sinon-chai": "^3.2.0" },

【讨论】：

我想添加这种方式，您不会将容器 id 传递到 Stage 构造函数中。

【解决方案2】：

有几种选择：

Alpar 提到的那个。它适用于我，但它需要构建旧的节点画布版本。
使用https://github.com/hustcc/jest-canvas-mock。如果您使用 Create React App，只需在 setupTests.js 中添加 import 'jest-canvas-mock'
理论上npm i -D canvas 也应该能解决这个问题，但我没有设法让它工作。阅读此处https://github.com/jsdom/jsdom/issues/1782 了解更多想法。

【讨论】：