Testing with jest/vitest

[ronny-lark]

This is not really a bug but rather a stumping behaviour.
I need to write unit tests for a component that uses this library.
I want to test that my callback is actually being called with the edited image.
My test in vitest is:

    function renderImageEditor({ open = true, useEdited = false }: { open?: boolean, useEdited?: boolean } = {}) {
      const mockOnClose = vi.fn();
      const mockOnEdit = vi.fn();
      const mockOriginalImage = 'original';
      const mockEditedImage = 'edited';
      const getters = render(
        <ImageEditor
          open={open}
          originalImage={mockOriginalImage}
          editedImage={useEdited ? mockEditedImage : undefined}
          onClose={mockOnClose}
          onEdit={mockOnEdit}
        />,
      );
      return {
        ...getters, mockOnEdit, mockOnClose, mockOriginalImage, mockEditedImage,
      };
    }

    it('should submit new image when saving after editing', () => {
      const {
        getByTestId, mockOnEdit, mockEditedImage, mockOriginalImage,
      } = renderImageEditor({ useEdited: true });
      const canvas = document.getElementById(imageEditorTestIds.canvas)!;
      fireEvent.mouseDown(canvas);
      fireEvent.mouseMove(canvas);
      fireEvent.mouseUp(canvas);
      const button = getByTestId(imageEditorTestIds.submit);
      fireEvent.click(button);
      expect(mockOnEdit).toHaveBeenCalled();
      expect(mockOnEdit).not.toHaveBeenCalledWith(mockEditedImage);
      expect(mockOnEdit).not.toHaveBeenCalledWith(mockOriginalImage);
    });
  });

I'm using id because using data-testid doesn't actually reach the underlying element.
This test fails, claiming that my function is not being called at all.

For brevity, here is my minimal component:

function Component = ({onEdit, originalImage, editedImage}) => {
  const [isEdited, setIsEdited] = useState<boolean>(false);
  const canvasRef = useRef<ReactSketchCanvasRef>(null);

  const onSubmit = async () => {
    if (isEdited) {
      const data = await canvasRef.current?.exportImage('jpeg');
      onEdit(data || originalImage);
      onClose();
    }
  };


  return <div data-testid={testIds.wrapper}>
           <ReactSketchCanvas
        id={testIds.canvas}
        ref={canvasRef}
        backgroundImage={editedImage || originalImage}
        className='w-full h-full'
        strokeWidth={4}
        strokeColor='red'
        exportWithBackgroundImage
        onStroke={() => setIsEdited(true)}
      />
    </div>

If onEdit is not being called, it means the isEdited is not being changed to true, which means my test never triggers the onStroke.
How do I actually test this?

[vinothpandian]

The jsdom in vitest or Jest does not support pointer events, making it impossible to unit test this functionality. Instead, you need to utilize a component test using playwright or Cypress.

[ronny-lark]

Thanks! I had no idea that that was the behavior of jsdom. We've mocked the library for the time being for this unit test but I'll keep this in mind!