The test stops when the function passed from the component is called in the fireEvent action handler

[jungeun-cho]

• preact-testing-library version: 2.0.1
• preact version: 10.5.13
• node version: 14.3.0
• npm (or yarn) version: My npm's version is 7.11.1

Relevant code or config I have defined a drag module to be used in the app.

This drag module receives the callback function defined in the component.

// apps/calendar/src/components/hooks/drag.ts
function useDrag({
  onDragStart = noop,
  onDrag = noop,
  onDragEnd = noop,
  onClick = noop,
  onCancel = noop,
}: DragListeners) {
  /*...*/
  const onMouseMove = (e: MouseEvent) => {
    /* ... */
    if (distance < DISTANCE) { // DISTANCE is 3
      distance += 1;

      return;
    }

    if (!isDragStartFired) {
      isDragStartFired = true;
      onDragStart(e); // 
Call the callback function passed from the component

      return;
    }

    onDrag(e); 
Call the callback function passed from the component
  };

  return {
    onMouseDown,
    onMouseMove,
    onMouseUp,
    onKeydown: onKeydownESC,
  };
}

// apps/calendar/test/app/components/daygrid/dayGrid.spec.tsx
  it('should create a guide element for the mouse event', () => {
    const getBoundingClientRectSpy = jest.fn(
      () =>
        ({
          width: 70,
          height: 100,
          left: 0,
          top: 0,
        } as DOMRect)
    );
    panel.getBoundingClientRect = getBoundingClientRectSpy;

    const { container } = render(
      <DayGrid
        options={option}
        calendar={calendar}
        appContainer={{ current: appContainer }}
        getMousePositionData={getMousePositionData(calendar, grids, panel)}
      />,
      { wrapper: StoreProvider }
    );

    const mouseArea = container.firstChild;

    if (!mouseArea) {
      return;
    }

    fireEvent.mouseDown(mouseArea, { clientX: 9, clientY: 20, button: 0 });
    fireEvent.mouseMove(document, { clientX: 15, clientY: 20 }); // distance 0
    fireEvent.mouseMove(document, { clientX: 15, clientY: 20 }); // distance 1
    fireEvent.mouseMove(document, { clientX: 15, clientY: 20 }); // distance 2

    
    fireEvent.mouseMove(document, { clientX: 15, clientY: 20 }); // # 1. onDragStart() callback function call
    fireEvent.mouseMove(document, { clientX: 15, clientY: 20 }); // # 2. onDrop() callback function call
    fireEvent.mouseUp(document, { clientX: 15, clientY: 40, button: 0 });

    // const guide = screen.getByTestId('creation-guide');
    // @TODO: Check the style of the guide element
    // expect(guide).toBeDefined();
  });

If you include the logic to call the component's callback function, the test will not run at all.

Reproduction repository: https://github.com/nhn/tui.calendar/tree/test/daygrid-ui-test

$ git clone https://github.com/nhn/tui.calendar.git
$ cd tui.calendar
$ git co -b test/daygrid-ui-test origin/test/daygrid-ui-test 
$ npm i --legacy-peer-deps (using npm 7)
$ npm run test

Problem description:

• disable following code
• enable following code

Suggested solution: TC should work fine.