[WIP] convert all test to vitest-browser - #2663
Open
matyasf wants to merge 3 commits into
Open
Conversation
The root tsconfig.json (which every packages/*/tsconfig.json extends, and which the IDE resolves for test files) used module Node16 / moduleResolution node16, while tsconfig.build.json (used by ts:check and build:types) used ESNext / bundler. Under node16 TS classifies every file as CommonJS, since no package sets "type": "module", so the browser-mode tests importing ESM-only vitest-browser-react and vitest/browser reported TS1479 in the editor while ts:check stayed green. Make tsconfig.json extend tsconfig.build.json so the two cannot drift again. Only exclude is restated, since it replaces rather than merges. This clears 31 TS1479s plus ~90 related interop errors (TS2835, TS1541, TS2834) across the 15 browser-mode test files and packages/__docs__. The bundler model is the accurate one here: these tests are never compiled by tsc, Vite transforms them as ESM. Also drop the __tests__ exclude from the six tsconfig.build.json files that had it, so their tests are typechecked like the other 89 packages'. That exclude was hiding a real error in FocusRegion.test.tsx, where .element() returns HTMLElement | SVGElement; cast it to HTMLElement. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Contributor
|
Contributor
Visual regression report
Diff images (33)alert.png — baseline no longer producedavatar.png — baseline no longer producedbadge.png — baseline no longer producedbillboard.png — baseline no longer producedbreadcrumb.png — baseline no longer producedbutton-and-derivatives.png — baseline no longer producedbyline.png — baseline no longer producedcalendar.png — baseline no longer producedcheckbox.png — baseline no longer producedcheckboxgroup.png — baseline no longer producedcolorpicker.png — baseline no longer producedcontextview.png — baseline no longer producedcustom-and-lucide-icons.png — baseline no longer produceddateinput-dateinput2.png — baseline no longer produceddatetimeinput.png — baseline no longer produceddiff-demo.png — 6324 pixels differdrilldown.png — baseline no longer producedfiledrop.png — baseline no longer producedform-errors.png — baseline no longer producedheading.png — baseline no longer producedimg.png — baseline no longer producedlink.png — baseline no longer producedmenu.png — baseline no longer producedmetric-pill-tag-timeselect-text.png — baseline no longer producedoptions.png — baseline no longer producedpagination.png — baseline no longer producedprogressbar.png — baseline no longer producedselect-simpleselect.png — baseline no longer producedtable.png — baseline no longer producedtabs.png — baseline no longer producedtooltip.png — baseline no longer producedtreebrowser.png — baseline no longer producedview.png — baseline no longer producedBaselines come from the |
Convert the unit tests of ui-billboard, ui-breadcrumb, ui-buttons, ui-byline, ui-calendar,
ui-checkbox and ui-color-picker to Vitest browser mode, and port the matching Cypress specs
(ToggleButton, ColorIndicator, ColorMixer, ColorPicker, ColorPreset) to the bottom of the
corresponding unit test files. The Cypress specs are removed.
Notable real-browser adaptations:
- `{ force: true }` where Playwright refuses to click disabled/aria-disabled or visually
hidden elements
- native `ClipboardEvent` with a real `DataTransfer` instead of `fireEvent.paste`
- `fireEvent.focusIn/focusOut` instead of `blur`/`focus`, which React does not listen for
- hidden tooltips are queried from the DOM, since they are not in the accessibility tree
- `unhover` before hover/click assertions, because the pointer position persists between
tests
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Move ui-date-input, ui-date-time-input, ui-dom-utils, ui-drawer-layout and ui-drilldown from the jsdom `web` project to the real-browser `browser` project, and fold the matching Cypress component specs into the unit test files as `Component tests` blocks. Notable real-browser adaptations: - computed `transition` is never empty, so DrawerContent asserts on `transitionDuration` instead - Playwright refuses to click `aria-disabled`/`disabled` elements, so those tests click the inner label content or dispatch the event directly - a real click lands on the innermost label element, so `event.target` is checked with `toContainElement` - Drilldown keyboard nav needs a `cleanup()` + settle `afterEach` and an explicit re-focus after page transitions, because the Popover FocusRegion schedules an async focus return that otherwise swallows later key presses 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
The root tsconfig.json (which every packages/*/tsconfig.json extends, and which the IDE resolves for test files) used module Node16 / moduleResolution node16, while tsconfig.build.json (used by ts:check and build:types) used ESNext / bundler. Under node16 TS classifies every file as CommonJS, since no package sets "type": "module", so the browser-mode tests importing ESM-only vitest-browser-react and vitest/browser reported TS1479 in the editor while ts:check stayed green.
Make tsconfig.json extend tsconfig.build.json so the two cannot drift again. Only exclude is restated, since it replaces rather than merges. This clears 31 TS1479s plus ~90 related interop errors (TS2835, TS1541, TS2834) across the 15 browser-mode test files and packages/docs. The bundler model is the accurate one here: these tests are never compiled by tsc, Vite transforms them as ESM.
Also drop the tests exclude from the six tsconfig.build.json files that had it, so their tests are typechecked like the other 89 packages'. That exclude was hiding a real error in FocusRegion.test.tsx, where .element() returns HTMLElement | SVGElement; cast it to HTMLElement.
🤖 Generated with Claude Code