Question

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

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

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来修复它： 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" },

Answer 2

有几种选择：

Alpar提到的那个。它对我有用，但是需要构建旧的节点画布版本。
使用https://github.com/jsdom/jsdom/issues/1782。如果您使用的是Create React App，只需在您的setupTests.js

import 'jest-canvas-mock'

理论上，npm i -D canvas也应解决此问题，但我还没有设法使它起作用。在此处{{3}}阅读更多的想法。

使用konva时运行测试时出错

2 个答案: