test: use playwright browser locators in Button and TreeView tests by tay1orjones · Pull Request #8527 · primer/react

tay1orjones · 2026-10-12T16:15:06Z

Use Button and TreeView to establish a bounded locator migration pattern before converting more browser tests. Keep RTL rendering and lifecycle APIs, along with the existing synchronous event, focus, and timer contracts.

Changelog

New

Document the hybrid locator/RTL pattern and its exceptions.

Changed

Use Vitest browser locators, browser-backed interactions, and condition-based assertions in Button and TreeView.

Removed

Fixed sleeps and waiting helpers in the pilot suites.

Rollout strategy

Testing & Reviewing

Run CI=true VITEST_FAIL_ON_CONSOLE=true npm test -- --run --project=@primer/react packages/react/src/Button/__tests__/Button.test.tsx packages/react/src/TreeView/TreeView.test.tsx. Review the exact-name selectors after expansion, detached-node checks, intentional synthetic events, and fake-timer boundaries against their original assertions. Browser interactions use awaited React act boundaries; the pointer-only TreeView chevron retains its programmatic click.

On the original pilot commit e8d2a7b69, 20 local before/after runs measured median suite times of 60.3 -> 200.2 ms for Button and 311.8 -> 950.5 ms for TreeView, excluding startup. These measurements precede the CI fixes; they don't measure the current revision or establish a flakiness improvement.

Co-authored-by: Copilot App 223556219+Copilot@users.noreply.github.com

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com> Copilot-Session: 3051e4e7-3e74-4dcd-b1f4-1314e3b9b56e

changeset-bot · 2026-10-12T16:15:11Z

⚠️ No Changeset found

Latest commit: aa67d0f

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

github-actions · 2026-10-12T16:15:38Z

⚠️ Action required

👋 Hi, this pull request contains changes to the source code that github/github-ui depends on. If you are GitHub staff, test these changes with github/github-ui using the integration workflow. Check the integration testing docs for step-by-step instructions. Or, apply the integration-tests: skipped manually label to skip these checks.

Restore the programmatic click for the pointer-only TreeView chevron. Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com> Copilot-Session: 3051e4e7-3e74-4dcd-b1f4-1314e3b9b56e

Keep RTL rendering and scoped act boundaries for manual updates. Await Vitest browser interactions directly without forcing act mode for the entire browser suite. Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com> Copilot-Session: 3051e4e7-3e74-4dcd-b1f4-1314e3b9b56e

tay1orjones · 2026-10-13T16:31:00Z


-// @ts-expect-error this is needed for act() from React
-// @see https://react.dev/reference/react/act#error-the-current-testing-environment-is-not-configured-to-support-act
-globalThis.IS_REACT_ACT_ENVIRONMENT = true


Removing this override lets Button and TreeView tests await browser interactions directly. The eight test suites unrelated to those (DataTableGrouping, UnderlinePanels, etc) still perform manual timer, hydration, or observer updates. RTL’s act enables the environment for those operations and restores it afterward, whereas React’s raw act doesn’t.

tay1orjones · 2026-10-14T19:13:46Z

My understanding is that integration tests aren't needed when changing only test files, but please correct me if I'm wrong here.

joshblack

Looks great! Just have a couple comments/questions. If you're interested, would be great to have a testing skill that loads testing.md (or I guess translate testing.md into the skill plus references format we've been doing) but that could totally be in a separate PR

joshblack · 2026-10-14T20:35:03Z

Do you think it'd be worth rolling this into a testing skill similar to what we do for style-guide or not really?

Yeah I'm happy to try it out in a follow up

@joshblack curious what you think 👀 #8572

Remove the Storybook interaction testing recommendation and point component interaction tests to the browser locator pilot. Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com> Copilot-Session: 3051e4e7-3e74-4dcd-b1f4-1314e3b9b56e

Copilot

🔵 Needs a closer look

The shared act-environment change affects all browser suites, and full-suite compatibility remains unverified.

No open issues 🎉

What changed in this PR

Establishes a browser-locator migration pattern for Primer React tests while retaining React Testing Library rendering and lifecycle helpers.

Changes:

Migrates Button and TreeView queries, interactions, and eventual assertions to Vitest browser APIs.
Removes the global React act-environment override and standardizes manual act imports.
Documents the hybrid testing pattern and its exceptions.

File	Description
packages/react/src/TreeView/TreeView.test.tsx	Migrates locators and interactions while preserving explicit focus and timer checks.
packages/react/src/Spinner/Spinner.test.tsx	Imports `act` from RTL.
packages/react/src/Skeleton/__tests__/SkeletonBox.test.tsx	Imports `act` from RTL.
packages/react/src/ScrollableRegion/ScrollableRegion.test.tsx	Imports `act` from RTL.
packages/react/src/RelativeTime/RelativeTime.test.tsx	Imports `act` from RTL.
packages/react/src/Portal/Portal.test.tsx	Imports `act` from RTL.
packages/react/src/hooks/__tests__/useMedia.test.tsx	Imports `act` from RTL.
packages/react/src/experimental/UnderlinePanels/UnderlinePanels.test.tsx	Imports `act` from RTL.
packages/react/src/DataTable/__tests__/DataTableGrouping.test.tsx	Imports `act` from RTL.
packages/react/src/Button/__tests__/Button.test.tsx	Migrates browser queries and interactions; replaces fixed sleeps.
packages/react/config/vitest/browser/setup.ts	Removes the global act-environment override.
contributor-docs/testing.md	Documents locator migration guidance and exceptions.

_{Review effort: Balanced}

tay1orjones · 2026-10-19T17:06:15Z

@copilot resolve conflicts

…pi-migration # Conflicts: # packages/react/src/TreeView/TreeView.test.tsx Co-authored-by: tay1orjones <3360588+tay1orjones@users.noreply.github.com>

Copilot · 2026-10-19T17:14:20Z

@copilot resolve conflicts

Resolved the conflicts with main in merge commit 79f3d38. Preserved the TreeView regression tests and adapted the new IconButton tests to browser locators; the targeted suites pass (123 tests).

Import act from RTL so hydration and unmount configure the React act environment for each operation. Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com> Copilot-Session: 3051e4e7-3e74-4dcd-b1f4-1314e3b9b56e

pilot browser locators in Button and TreeView tests

e8d2a7b

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com> Copilot-Session: 3051e4e7-3e74-4dcd-b1f4-1314e3b9b56e

tay1orjones added the skip changeset This change does not need a changelog label Oct 12, 2026

github-actions Bot added the integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm label Oct 12, 2026

tay1orjones deployed to github-pages October 12, 2026 16:24 — with GitHub Actions

View deployment

github-actions Bot temporarily deployed to storybook-preview-8527 October 12, 2026 16:24 Inactive

wrap pilot browser interactions in React act

480561a

Restore the programmatic click for the pointer-only TreeView chevron. Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com> Copilot-Session: 3051e4e7-3e74-4dcd-b1f4-1314e3b9b56e

tay1orjones deployed to github-pages October 12, 2026 17:21 — with GitHub Actions

View deployment

github-actions Bot temporarily deployed to storybook-preview-8527 October 12, 2026 17:22 Inactive

tay1orjones deployed to github-pages October 13, 2026 15:39 — with GitHub Actions

View deployment

github-actions Bot temporarily deployed to storybook-preview-8527 October 13, 2026 15:39 Inactive

tay1orjones commented Oct 13, 2026

View reviewed changes

tay1orjones changed the title ~~pilot browser locators in Button and TreeView tests~~ test: use playwright browser locators in Button and TreeView tests Oct 14, 2026

tay1orjones added integration-tests: skipped manually Changes in this PR do not require an integration test and removed integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm labels Oct 14, 2026

tay1orjones marked this pull request as ready for review October 14, 2026 19:14

tay1orjones requested a review from a team as a code owner October 14, 2026 19:14

tay1orjones requested review from joshblack and a balanced review from Copilot and removed request for Copilot October 14, 2026 19:14

tay1orjones enabled auto-merge October 14, 2026 19:35

joshblack approved these changes Oct 14, 2026

View reviewed changes

tay1orjones added this pull request to the merge queue Oct 14, 2026

github-merge-queue Bot removed this pull request from the merge queue due to failed status checks Oct 14, 2026

update interaction testing guidance

e6f72aa

Remove the Storybook interaction testing recommendation and point component interaction tests to the browser locator pilot. Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com> Copilot-Session: 3051e4e7-3e74-4dcd-b1f4-1314e3b9b56e

Copilot AI balanced review requested due to automatic review settings October 19, 2026 15:42

Copilot started reviewing on behalf of tay1orjones October 19, 2026 15:45

View session

Copilot AI reviewed Oct 19, 2026

View reviewed changes

tay1orjones deployed to github-pages October 19, 2026 15:56 — with GitHub Actions

View deployment

github-actions Bot temporarily deployed to storybook-preview-8527 October 19, 2026 15:56 Inactive

tay1orjones mentioned this pull request Oct 19, 2026

docs: add a component-testing skill #8572

Merged

1 of 5 tasks

Copilot started work on behalf of tay1orjones October 19, 2026 17:07

View session

Merge remote-tracking branch 'origin/main' into tay1orjones-testing-a…

79f3d38

…pi-migration # Conflicts: # packages/react/src/TreeView/TreeView.test.tsx Co-authored-by: tay1orjones <3360588+tay1orjones@users.noreply.github.com>

Copilot finished work on behalf of tay1orjones October 19, 2026 17:14

tay1orjones added integration-tests: skipped manually Changes in this PR do not require an integration test and removed integration-tests: skipped manually Changes in this PR do not require an integration test labels Oct 19, 2026

Copilot AI deployed to github-pages October 19, 2026 20:12

View deployment

github-actions Bot temporarily deployed to storybook-preview-8527 October 19, 2026 20:13 Inactive

fix DataTable selection hydration act scope

aa67d0f

Import act from RTL so hydration and unmount configure the React act environment for each operation. Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com> Copilot-Session: 3051e4e7-3e74-4dcd-b1f4-1314e3b9b56e

tay1orjones deployed to github-pages October 20, 2026 14:37 — with GitHub Actions

View deployment

github-actions Bot temporarily deployed to storybook-preview-8527 October 20, 2026 14:37 Inactive

tay1orjones added this pull request to the merge queue Oct 20, 2026

Merged via the queue into main with commit ffa1708 Oct 20, 2026
54 checks passed

tay1orjones deleted the tay1orjones-testing-api-migration branch October 20, 2026 15:43

Conversation

tay1orjones commented Oct 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changelog

New

Changed

Removed

Rollout strategy

Testing & Reviewing

Uh oh!

changeset-bot Bot commented Oct 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ No Changeset found

Uh oh!

github-actions Bot commented Oct 12, 2026

⚠️ Action required

Uh oh!

tay1orjones Oct 13, 2026

Choose a reason for hiding this comment

Uh oh!

tay1orjones commented Oct 14, 2026

Uh oh!

joshblack left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

joshblack Oct 14, 2026

Choose a reason for hiding this comment

Uh oh!

tay1orjones Oct 14, 2026

Choose a reason for hiding this comment

Uh oh!

tay1orjones Oct 19, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

🔵 Needs a closer look

Uh oh!

tay1orjones commented Oct 19, 2026

Uh oh!

Copilot AI commented Oct 19, 2026

Uh oh!

Uh oh!

This branch was successfully deployed

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

tay1orjones commented Oct 12, 2026 •

edited

Loading

changeset-bot Bot commented Oct 12, 2026 •

edited

Loading