CODEWITHSUNDEEP
reactjsjestjskonvajs
joek1975
joek1975

Reputation: 3583

Error when running tests while using konva

I am trying to get started in building a react application using konva, react-konva.

I built a basic react component:

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;

and also a test using 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);
    });
  });
});

When this test runs, I get the following error:

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)

My dependencies from 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"
  }

I'm sure that this is related to node setup, but I am unsure of the correct way to do it. Can anyone help?

Upvotes: 3

Views: 3101

Answers (2)

daliusd
daliusd

Reputation: 1165

There are several options:

  1. The one mentioned by Alpar. It works for me but it requires building of old node-canvas version.

  2. Using https://github.com/hustcc/jest-canvas-mock. If you are using Create React App just add import 'jest-canvas-mock' in your setupTests.js

  3. Theoretically npm i -D canvas should solve this problem as well but I have not managed to make it work. Read here https://github.com/jsdom/jsdom/issues/1782 for more ideas.

Upvotes: 3

Alp&#225;r
Alp&#225;r

Reputation: 727

I fixed it by installing and using konva-node in my test: import Konva from 'konva-node';

I also had to specify that it's not used in the browser before executing any tests: Konva.isBrowser = false;

I am using the following dependencies: "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" },

Upvotes: 3

Related Questions