fireEvent.animationEnd does not call preact-registered listener

[rburgst]

• preact-testing-library version: 3.2.2
• preact version: 10.11.0
• node version: 16.17.0
• npm (or yarn) version: yarn 3.2.3

Relevant code or config

export interface TestComponentProps {
  onNextClick?: () => void;
}

export const TestComponent: FunctionComponent<TestComponentProps> = ({
  onNextClick,
}) => {
  return (
    <div data-countdown onAnimationEnd={onNextClick}>
      FOO
    </div>
  );
};

and the corresponding test

  it("should call onNextClick on animation end", async () => {
    //given
    const props = {
      onNextClick: jest.fn(),
    };

    //when
    const { container } = render(<TestComponent {...props} />);

    fireEvent.animationEnd(
      container.querySelector("[data-countdown]") as HTMLElement
    );

    //then
    expect(props.onNextClick).toHaveBeenCalledTimes(1);
  });

What you did:

in a jest test calling

  const divElement = container.querySelector("[data-countdown]") as HTMLElement;
  fireEvent.animationEnd(divElement);

What happened:

The callback in

<div onAnimationEnd={onNextClick}>

is not being called.

The test will report the following

  ● test-component › should call onNextClick on animation end

    expect(jest.fn()).toHaveBeenCalledTimes(expected)

    Expected number of calls: 1
    Received number of calls: 0

      19 |
      20 |     //then
    > 21 |     expect(props.onNextClick).toHaveBeenCalledTimes(1);
         |                               ^
      22 |   });
      23 | });
      24 |

      at Object.<anonymous> (src/components/__tests__/test.spec.tsx:21:31)
      at TestScheduler.scheduleTests (node_modules/@jest/core/build/TestScheduler.js:333:13)
      at runJest (node_modules/@jest/core/build/runJest.js:404:19)
      at _run10000 (node_modules/@jest/core/build/cli/index.js:320:7)
      at runCLI (node_modules/@jest/core/build/cli/index.js:173:3)

Reproduction repository:
https://github.com/rburgst/preact-testing-animation-bug/

Problem description:

The problem appears that the listeners in jsdom are registered with AnimationEnd while the event being fired is animationend.

Note that this worked in @testing-library/preact": "^2.0.1" but fails with the current version 3.2.2.

Suggested solution:

I guess this problem is similar to #51

[rburgst]

anyone home?

[edwinckc]

Thank you for this, just made the switch from ^2.0.1 to 3.2.4 and wasted so much time on fireEvent.transitionEnd and fireEvent.focusIn. I used the temporary fix here.