TypeError: node.getAnimations is not a function

[roomman]

What package within Headless UI are you using?

For example: @headlessui/react

What version of that package are you using?

For example: v2.1.6

What browser are you using?

N/A

Describe your issue

I am seeing the following errors when running Jest tests using the latest version of HeadlessUI:

 TypeError: node.getAnimations is not a function
      
            at waitForTransition (../../node_modules/@headlessui/react/dist/headlessui.dev.cjs:3752:26)
            at ../../node_modules/@headlessui/react/dist/headlessui.dev.cjs:3739:13

It looks like the changes made on L236 in #3452 introduced a bug.

[RobinMalfait]

Hey!

This should be fixed by #3473, and will be available is available in the latest release.

The issue is that we rely on Element.prototype.getAnimations(…) which is a browser feature that's available in browsers since 2020. Unfortunately, jsdom is not up to date and therefore it crashes.

To solve this, we ship with a very minimal polyfill, just enough to run the tests. However, we do show a warning now that guides you to using a polyfill to silence the warnings.

I would also recommend to:

1. Try and move to real browser tests (e.g.: Playwright)
2. Use a proper polyfill like jsdom-testing-mocks

You can already try it using:

• npm install @headlessui/react@latest.

[SquidDev]

The above fix will error in environments where Element is not defined (for instance, when using react-test-renderer). Would it be possible to guard that polyfill with an is-defined check — as long one is only constructing the vdom (rather than actual HTML nodes), we shouldn't ever need it.