Migrate Components Custom Select Tests to Browser Mode

[ciampo]

What?

Follow up to #80855 and #80983.

TL;DR: This moves the two Components custom-select suites from Ariakit's jsdom helpers to canonical Vitest Browser Mode. The necessary change classes are vitest-browser-react rendering, per-test userEvent.setup(), retryable browser locators, sequential real pointer input, Browser Mode snapshot-matcher parity, and direct workspace dependency ownership.

Why?

These suites exercise popovers, focus, keyboard selection, typeahead, CSS visibility, and multi-select behavior that benefit from a real browser. Migrating them separately makes the browser-only timing and interaction differences reviewable without coupling them to the larger tabs and composite suites.

How?

• Routes both custom-select test files to the Chromium project and renders them with vitest-browser-react.
• Replaces Ariakit click, keyboard, type, wait, and sleep helpers with per-test userEvent.setup() and retryable page locators.
• Removes the old extra-Enter typeahead workaround; native browser input selects the matching option directly.
• Replaces concurrent multi-select clicks with sequential user interactions and observable selection assertions.
• Extends browser setup with the existing Vitest style-diff matcher and raw Snapshot Diff serializer. The existing snapshot passes unchanged.
• Declares vitest-browser-react directly in @wordpress/components and updates the lockfile.

Eleven Components @ariakit/test consumer files remain for bounded follow-up PRs.

Testing Instructions

1. Run the focused browser suites:
   npm run test:unit:vitest -- --project browser packages/components/src/custom-select-control/test/index.tsx packages/components/src/custom-select-control-v2/test/index.tsx
2. Run the complete Browser Mode project:
   npm run test:unit:vitest -- --project browser
3. Validate routing, type/dependency conventions, and metadata:
   npm run --workspace @wordpress/unit-tests test:unit:routing
npm run --workspace @wordpress/unit-tests test:unit:conventions
npm run lint:pkg-json -- packages/components/package.json
npm run lint:lockfile
4. Run the complete Vitest suite:
   npm run test:unit:vitest

Verified locally:

• Focused custom-select suites: 2 files and 69 tests passed in Chromium.
• Complete Browser Mode project: 9 files and 165 tests passed.
• Complete suite: 998 passed and 2 skipped files; 34,720 passed and 8 skipped tests.
• Residual Jest partition: 3 suites, 33 tests, 0 snapshots.
• Routing: 996 baseline tests owned exactly once; 1,000 Vitest tests and 3 Jest tests, with 164 tracked renames and 7 additions.
• Convention graph: 1,000 Vitest tests, 1,017 ESM graph files, 102 workspace dependencies, and 402 TypeScript tests.
• Strict JavaScript lint, package metadata, lockfile, and diff checks passed.
• The existing style-diff snapshot passed unchanged; no snapshot file was regenerated.

Testing Instructions for Keyboard

Not applicable; this changes test infrastructure only.

Screenshots or screencast

Not applicable.

Use of AI Tools

Codex was used to convert the interaction helpers, investigate real-browser visibility and sequencing failures, add retryable assertions and dependency ownership, and run the verification commands. The resulting diff and unchanged snapshot were reviewed directly.

[github-actions]

Size Change: 0 B

Total Size: 7.76 MB

_{compressed-size-action}