reactjs - 使用 konva 运行测试时出错

Question

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

我构建了一个基本的 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)

我来自 package.json 的依赖项:

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

我确定这与节点设置有关，但我不确定正确的方法。谁能帮忙？

Answer 1

我在测试中通过安装和使用 konva-node 修复了它:
从 'konva-node' 导入 Konva；


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


我正在使用以下依赖项:
“依赖”:{
"axios": "^0.18.0",
"konva": "^2.5.0",
“ react ”:“^ 16.5.2”，
“ react -dom”:“^ 16.5.2”，
“ react -konva”:“^ 16.5.2”，
“ react 脚本”:“2.0.5”
},
“devDependencies”:{
“柴”:“^ 4.2.0”，
“酵素”:“^3.7.0”，
"enzyme-adapter-react-16": "^1.7.0",
“konva-节点”:“^0.5.5”，
"诗乃": "^7.1.1",
“sinon-chai”:“^3.2.0”
},