Jest tests for zoom controls

[vasanthid]

Hi,

I am new to reaflow and I am following the zoom controls example on https://reaflow.dev/?path=/story/demos-controls--zoom

I would like to add jest tests using react testing library. I have the following so far but test is failing

<Icon data-testid="fitToCanvas" onClick={() => {
            diagramRef?.current?.fitCanvas();
            }} />

<Canvas
            ref={diagramRef}
....
/>

it('should call appropriate callbacks onclick of zoom controls', async () => {
    const fitToCanvasIcon = screen.getByTestId('fitToCanvas');
    const mockMethod = jest.fn()
    jest
    .spyOn(React, 'useRef')
    .mockReturnValue({
      current: {
        fitCanvas: mockMethod
      }
   });

    await act(async () => {
      fireEvent.click(fitToCanvasIcon)
    })
    expect(mockMethod).toBeCalled();
  }) 

test is failing with the error diagramRef?.current?.fitCanvas is not a function

Can anyone please help?

[amcdnl]

We use vitest for testing. Its similar to jest so you should be fine there. Might be something in the jest runner that needs to be polyfilled.

[vasanthid]

@amcdnl Thank you for your response. Can you please share what you have with vitest?

[vasanthid]

@amcdnl - when tried with vitest, I am getting below error

require() of ES Module /node_modules/p-cancelable/index.js from /node_modules/reaflow/dist/index.cjs.js not supported.
Instead change the require of index.js in /node_modules/reaflow/dist/index.cjs.js to a dynamic import() which is available in all CommonJS modules.

I am using below imports in my React component

import { Canvas, Node, Edge, Add} from 'reaflow'
import { TransformWrapper, TransformComponent } from 'react-zoom-pan-pinch'

I am using [email protected]

Can you please advise?