TypeError: Cannot set properties of undefined (setting 'fillStyle')

[tarangsachdev]

I have implemented go js in my react application and it seems working for me, but since I need to add testcases in my application I have added testcase for that, after so many tries I am still not able to test that, the given diagram is render in a component.

“gojs”: “^2.1.53”,
“gojs-react”: “^1.1.0”,
“react”:“17.0.2”

here is my code for my javascript(react) file

import * as go from 'gojs';
import { useQuery } from '@apollo/client';
import { ReactDiagram } from 'gojs-react';
import * as React from 'react';

import './SVGImage.css';

const SVGImageWrapper = () => {
  const svgImageRef = React.useRef();

  const handleClick = (diagram) => {
    diagram.zoomToFit();
  };

  const ships = [
    { image: 'https://i.imgur.com/MtEgYbY.jpg', id: 'GOMSTREE' },
    { image: 'https://i.imgur.com/5w1ZWre.jpg', id: 'GOPURSUIT' },
  ];
 
  const initDiagram = () => {
    const randomImageIndex = 0;
    const $ = go.GraphObject.make;
 
    const diagram = $(go.Diagram, {
      minScale: 0.25,
    });
    diagram.add(
      $(
        go.Part,
        go.Part.Position,
        {
          selectable: false,
          pickable: false,
        },
       
        $(go.Picture, ships[randomImageIndex].image, {
          width: 210,
          height: 500,
          margin: 2,
          position: new go.Point(0, 0),
        }),
      ),
    );
    const resetZoomElement = document.getElementById('reset-zoom');

    resetZoomElement.addEventListener(
      'click',
      () => {
        handleClick(diagram);
      },
      false,
    );

    return diagram;
  };

  return (
    ships &&
    ships.length && (
      <>
        <ReactDiagram
          ref={svgImageRef}
          divClassName="svg-diagram-component"
          initDiagram={initDiagram}
        />
        <button id="reset-zoom">Reset Zoom</button>
      </>
    )
  );
};

export default SVGImageWrapper;

here is the code for my test case

import { React } from 'react';
import * as go from 'gojs';
import { act, render } from '@testing-library/react';
import SVGImageWrapper from '../SVGImageWrapper';

describe('ReactDiagram tests', () => {
  beforeEach(async () => {
    // go.Palette.useDOM(false);
  });
  test('renders diagram', async () => {
    const component = await render( <SVGImageWrapper /> );
    const diagram = await component.container.getElementsByClassName('svg-diagram-component')[0]
      .goDiagram;
    console.log(diagram);
    expect(diagram).not.toBeUndefined();
  });
});

it throws an error like

Uncaught [TypeError: Cannot set properties of undefined (setting ‘fillStyle’)]

I tried to add
import ‘jest-canvas-mock’;
in setupTests.js file

[walter]

Could you please describe in detail what you have done?

[tarangsachdev]

Updated the question

[walter]

I don’t have time right now to try anything (it’s a holiday), but maybe this sample project could help you:

gojs-react-samples/gojs-react-jest at main ·...

[tarangsachdev]

I have already cloned that repo in my machine and it is working ok, but when I try to implement in my project(the same thing), it throws the same error as above.

I also copied and pasted my code in the repo you provided and, in that repo the same test case run without error, but the same test case throws and error as above

[tarangsachdev]

I got resolved by remove

yarn remove jest-canvas-mock
yarn add canvas

and import it in setupTests.js file like

import 'canvas';
import '@testing-library/jest-dom';

[simon]

Thanks for letting us know what worked. We’ll look in to the implementation of jest-canvas-mock to see if we can accommodate it in the future.