Reactjs 使用konva时运行测试时出错

我正在尝试开始使用

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;

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

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)

---

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

我通过在测试中安装并使用

konva节点来修复它：

从“Konva节点”导入Konva；

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

Konva.isBrowser=false；

我正在使用以下依赖项：

“依赖项”：{
“axios”：“^0.18.0”，
“konva”：“^2.5.0”，
“反应”：“^16.5.2”，
“react dom”：“^16.5.2”，
“react konva”：“^16.5.2”，
“反应脚本”：“2.0.5”
},
“依赖性”：{
“chai”：“^4.2.0”，
“酶”：“^3.7.0”，
“酶-适配器-反应-16”：“^1.7.0”，
“konva节点”：“^0.5.5”，
“信农”：“^7.1.1”，
“柴信农”：“^3.2.0”
},
有几个选项：

阿尔帕提到的那个。它适合我，但需要构建旧的节点画布版本

使用。如果您使用的是Create React应用程序，只需在setupTests.js中添加
导入'jest canvas mock'

理论上，NPMIcanvas应该也能解决这个问题，但我还没有成功地使它工作。阅读这里了解更多想法

你检查过这个了吗？是的，我看到了，并且安装了canvas、jsdom、node gyp作为devdependences。它对我仍然不起作用。我想添加这样一种方式，即不将容器id传递到
Stage
构造函数中。
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)

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