Robin Malfait
4737c6df97
Recently we made improvements to the `Transition` component and internal
`useTransition` hook. We now use the `Element.prototype.getAnimations`
API to know whether or not all transitions are done.
This API has been available in browsers since 2020, however jsdom
doesn't have support for this. This results in a lot of failing tests
where users rely on jsdom (e.g. inside of Jest or Vitest).
In a perfect world, jsdom is not used because it's not a real browser
and there is a lot you need to workaround to even mimic a real browser.
I understand that just switching to real browser tests (using Playwright
for example) is not an easy task that can be done easily.
Even our tests still rely on jsdom…
So to make the development experience better, we polyfill the
`Element.prototype.getAnimations` API only in tests
(`process.env.NODE_ENV === 'test'`) and show a warning in the console on
how to proceed.
The polyfill we ship simply returns an empty array for
`node.getAnimations()`. This means that it will be _enough_ for most
tests to pass. The exception is if you are actually relying on
`transition-duration` and `transition-delay` CSS properties.
The warning you will get looks like this:
``````
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()
```
``````
Fixes: #3470
Fixes: #3469
Fixes: #3468
64 lines
1.8 KiB
JSON
64 lines
1.8 KiB
JSON
{
|
|
"name": "@headlessui/react",
|
|
"version": "2.1.6",
|
|
"description": "A set of completely unstyled, fully accessible UI components for React, designed to integrate beautifully with Tailwind CSS.",
|
|
"main": "dist/index.cjs",
|
|
"typings": "dist/index.d.ts",
|
|
"module": "dist/headlessui.esm.js",
|
|
"license": "MIT",
|
|
"files": [
|
|
"README.md",
|
|
"dist"
|
|
],
|
|
"exports": {
|
|
"types": {
|
|
"import": "./dist/index.d.ts",
|
|
"require": "./dist/index.d.cts"
|
|
},
|
|
"import": "./dist/headlessui.esm.js",
|
|
"require": "./dist/index.cjs"
|
|
},
|
|
"type": "module",
|
|
"sideEffects": false,
|
|
"engines": {
|
|
"node": ">=10"
|
|
},
|
|
"repository": {
|
|
"type": "git",
|
|
"url": "git+https://github.com/tailwindlabs/headlessui.git",
|
|
"directory": "packages/@headlessui-react"
|
|
},
|
|
"publishConfig": {
|
|
"access": "public"
|
|
},
|
|
"scripts": {
|
|
"prepublishOnly": "npm run build",
|
|
"build": "../../scripts/build.sh --external:react --external:react-dom",
|
|
"watch": "../../scripts/watch.sh --external:react --external:react-dom",
|
|
"test": "../../scripts/test.sh",
|
|
"lint": "../../scripts/lint.sh",
|
|
"lint-types": "npm run attw -P --workspaces --if-present",
|
|
"playground": "npm run dev --workspace=playground-react",
|
|
"clean": "rimraf ./dist"
|
|
},
|
|
"peerDependencies": {
|
|
"react": "^18",
|
|
"react-dom": "^18"
|
|
},
|
|
"devDependencies": {
|
|
"@testing-library/react": "^15.0.7",
|
|
"@types/react": "^18.3.3",
|
|
"@types/react-dom": "^18.3.0",
|
|
"jsdom-testing-mocks": "^1.13.1",
|
|
"react": "^18.3.1",
|
|
"react-dom": "^18.3.1",
|
|
"snapshot-diff": "^0.10.0"
|
|
},
|
|
"dependencies": {
|
|
"@floating-ui/react": "^0.26.16",
|
|
"@react-aria/focus": "^3.17.1",
|
|
"@react-aria/interactions": "^3.21.3",
|
|
"@tanstack/react-virtual": "^3.8.1"
|
|
}
|
|
}
|