Upgrade from 2.1.4 to 2.1.5: TypeError: e.getAnimations is not a function

[corneliusroemer]

What package within Headless UI are you using?

For example: @headlessui/react

What version of that package are you using?

For example: v2.1.5

What browser are you using?

vitest

Reproduction URL

https://github.com/loculus-project/loculus/tree/headless-bug

npm ci
npm run test

Describe your issue

After upgrading (patch update) from 2.1.4 to 2.1.5 vitest errors with:

TypeError: e.getAnimations is not a function
 ❯ y node_modules/.pnpm/@headlessui+react@2.1.5_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@headlessui/react/dist/hooks/use-transition.js:1:1398
 ❯ node_modules/.pnpm/@headlessui+react@2.1.5_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@headlessui/react/dist/hooks/use-transition.js:1:1292
 ❯ invokeTheCallbackFunction node_modules/.pnpm/jsdom@25.0.0/node_modules/jsdom/lib/jsdom/living/generated/Function.js:19:26
 ❯ runAnimationFrameCallbacks node_modules/.pnpm/jsdom@25.0.0/node_modules/jsdom/lib/jsdom/browser/Window.js:662:13
 ❯ Timeout._onTimeout node_modules/.pnpm/jsdom@25.0.0/node_modules/jsdom/lib/jsdom/browser/Window.js:640:11
 ❯ listOnTimeout node:internal/timers:594:17
 ❯ processTimers node:internal/timers:529:7

[corneliusroemer]

Discussed in #3468

Do I understand #3468 correctly that you're saying this works as intended? (It should be closed as "not planned then" not as completed.

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

[corneliusroemer]

Thank you @RobinMalfait - that's great news, I'll try it out!

We're using Playwright as well, but also vitest/jsdom specifically for component tests.

Latest means 2.1.7 is the first to fix I assume.

I now see this warning as suggested:

Headless UI has polyfilled `Element.prototype.getAnimations` for your tests.
Please install a proper polyfill e.g. `jsdom-testing-mocks`, to silence these warnings.

Example usage:
\```js
import { mockAnimationsApi } from 'jsdom-testing-mocks'
mockAnimationsApi()
\```