Error when running tests while using konva - reactjs

Question

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?

Answer 1

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

Answer 2

There are several options:
The one mentioned by Alpar. It works for me but it requires building of old node-canvas version.
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
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.