search

tailwindlabs / headlessui

Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.
https://headlessui.com
MIT License
25.81k stars 1.07k forks source link

TypeError: node.getAnimations is not a function #3470

Closed roomman closed 2 weeks ago

roomman commented 3 weeks ago

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 https://github.com/tailwindlabs/headlessui/pull/3452 introduced a bug.

RobinMalfait commented 2 weeks ago

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:

SquidDev commented 1 week ago

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.