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

repo showing a problem in `@testing-library/preact": "^3.2.2"`
https://github.com/rburgst/preact-testing-animation-bug

Last synced: 2 days ago
JSON representation

repo showing a problem in `@testing-library/preact": "^3.2.2"`

• Host: GitHub
• URL: https://github.com/rburgst/preact-testing-animation-bug
• Owner: rburgst
• Created: 2022-09-14T16:07:53.000Z (over 2 years ago)
• Default Branch: master
• Last Pushed: 2022-09-14T16:15:23.000Z (over 2 years ago)
• Last Synced: 2024-11-08T17:53:06.752Z (about 2 months ago)
• Language: TypeScript
• Size: 1.68 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
Sample repo that shows a problem where `fireEvent.animationEnd` does not work for a preact component.

See also https://github.com/testing-library/preact-testing-library/issues/67

To reproduce 

```

yarn install

yarn test

```

Note that all tests are green

now change the version of `@testing-library/preact": "^3.2.2"`

```

yarn install

yarn test

```

Note that the test fails now.

## Details

The following does not work

```typescript

export interface TestComponentProps {

  onNextClick?: () => void;

}

export const TestComponent: FunctionComponent = ({

  onNextClick,

}) => {

  return (

    


      FOO

    

  );

};


```

and the corresponding test

```typescript

  it("should call onNextClick on animation end", async () => {

    //given

    const props = {

      onNextClick: jest.fn(),

    };

    //when

    const { container } = render();

    fireEvent.animationEnd(

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

    );

    //then

    expect(props.onNextClick).toHaveBeenCalledTimes(1);

  });

```

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`.

Screenshot of the listeners in jsdoms `EventTarget-impl.js` `invokeEventListeners`

![img.png](doc/img.png)