Update vitest config and TreeView tests to Vitest #6236

joshblack · 2025-06-25T21:54:10Z

Updates our TreeView tests from Jest to Vitest. This PR also includes some changes I needed to land in order to convert the tests, namely:

The vitest browser environment is now set up so that our styles should match how they appear in storybook
Our test suite will now fail in CI if a console.* method is logged (helps to prevent act() warnings from sneaking in)

Changelog

New

Changed

Update TreeView tests from Jest to Vitest
Update vitest setup files
- Split browser-config into specific setup file
- Use shared setup config across Node.js and browser tests
Use postcss preset for transforming CSS files in vitest

Removed

Rollout strategy

None; if selected, include a brief description as to why

This is a change to our internal test setup and does not impact our public API.

…lOnConsole

changeset-bot · 2025-06-25T21:54:13Z

⚠️ No Changeset found

Latest commit: 08fc3ca

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 · 2025-06-25T21:54:38Z

👋 Hi, this pull request contains changes to the source code that github/github depends on. If you are GitHub staff, we recommend testing these changes with github/github using the integration workflow. Thanks!

Copilot

Pull Request Overview

This PR migrates existing Jest tests to Vitest for the TreeView suite and refines the Vitest setup for both Node and browser environments, including style transformations and stricter console logging checks.

Convert TreeView tests from Jest to Vitest (imports, timers, userEvent)
Update Vitest configs to include shared setup files, PostCSS, and browser CSS
Introduce vitest-fail-on-console in common setup and remove legacy cleanup

Reviewed Changes

Copilot reviewed 18 out of 20 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
packages/react/vitest.config.mts	Added shared `setup.ts` for node-based tests
packages/react/vitest.config.browser.mts	Configured PostCSS, scoped class names, and browser setup files
packages/react/src/hooks/tests/useAnchoredPosition.test.tsx	Switched to async/`waitFor` and Vitest imports
packages/react/src/TreeView/TreeView.test.tsx	Fully migrated TreeView tests to Vitest; timers, `userEvent`, act
packages/react/config/vitest/setup.ts	Replaced manual cleanup with `vitest-fail-on-console`
packages/react/config/vitest/browser/setup.ts	Added global CSS imports and DOM cleanup for browser tests
packages/react/src/AnchoredOverlay/AnchoredOverlay.test.tsx	Converted tests to async/`userEvent` and Vitest imports

Comments suppressed due to low confidence (5)

packages/react/src/TreeView/TreeView.test.tsx:211

This test body is entirely commented out, so no assertions run. Either remove or re-enable the test logic to ensure this behavior is actually verified.

  it('should include `aria-expanded` when a SubTree contains content', async () => {

packages/react/src/TreeView/TreeView.test.tsx:1467

You replaced an async findByRole with a synchronous getByRole for an element that appears during an async state. This may flake if the loading node isn't present immediately. Consider using findByRole or waitFor.

    const loadingItem = getByRole('treeitem', {name: 'Loading...'})

packages/react/src/TreeView/TreeView.test.tsx:1530

vi.waitFor isn't imported; Vitest doesn’t expose waitFor on vi by default. Import waitFor from @testing-library/react (or from Vitest if supported) to use it.

    await vi.waitFor(() => {

packages/react/config/vitest/setup.ts:3

You removed the cleanup() call for React testing in the node setup. Without calling cleanup after each test, rendered DOM nodes may leak between tests. Re-introduce cleanup() in an afterEach hook.

const failConsoleMessages = process.env.CI === 'true'

packages/react/src/AnchoredOverlay/AnchoredOverlay.test.tsx:1

act should be imported from @testing-library/react (or react-dom/test-utils), not from react itself. Please correct the import to ensure the testing helper works correctly.

import {act, useCallback, useState} from 'react'

Copilot · 2025-06-25T21:56:23Z

packages/react/src/hooks/__tests__/useAnchoredPosition.test.tsx

@@ -18,16 +18,19 @@ const Component = ({callback}: {callback: (hookReturnValue: ReturnType<typeof us
  )
 }

-it('should should return a position', () => {
+it('should should return a position', async () => {


[nitpick] The test description has a duplicated word: should should. Please remove the extra should so it reads should return a position.

Suggested change

it('should should return a position', async () => {

it('should return a position', async () => {

Copilot · 2025-06-25T21:56:24Z

packages/react/src/TreeView/TreeView.test.tsx

+    await act(async () => {
+      await user.click(button)
+    })


[nitpick] Wrapping user.click in act is usually unnecessary with @testing-library/user-event, which already handles React act internally. You can simplify to await user.click(button).

Suggested change

await act(async () => {

await user.click(button)

})

await user.click(button)

Copilot · 2025-06-25T21:56:24Z

packages/react/src/TreeView/TreeView.test.tsx

    expect(button).toHaveFocus()

    // Move focus to tree
    const item1 = getByRole('treeitem', {name: /Item 1/})
-    const toggle = item1.querySelector('.PRIVATE_TreeView-item-toggle')
-    await user.click(toggle!)
+    const toggle = item1.querySelector('.PRIVATE_TreeView-item-toggle') as HTMLElement


Querying by an internal class name is brittle. Consider exposing a data-testid or using an accessible query (e.g., getByRole or getByLabelText) to select the toggle element.

github-actions · 2025-06-25T21:58:04Z

size-limit report 📦

Path	Size
packages/react/dist/browser.esm.js	92.51 KB (0%)
packages/react/dist/browser.umd.js	92.56 KB (0%)

…ests-to-vitest-6-25

TylerJDev

LGTM!

joshblack added 6 commits June 25, 2025 12:16

refactor(TreeView): update test from Jest to Vitest

1993f33

test(vitest): update config to include global setup, postcss, and fai…

6f7e137

…lOnConsole

test: fix act() warnings

843026f

chore(test): update snapshots

0ca6a72

chore(test): remove act() warnings

5073211

chore(test): fix act() warnings

ba1c077

Copilot AI review requested due to automatic review settings June 25, 2025 21:54

joshblack requested a review from a team as a code owner June 25, 2025 21:54

joshblack requested a review from hectahertz June 25, 2025 21:54

joshblack added the skip changeset This change does not need a changelog label Jun 25, 2025

github-actions bot added the staff Author is a staff member label Jun 25, 2025

joshblack requested a review from TylerJDev June 25, 2025 21:54

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 Jun 25, 2025

chore: sort lists

ee7ed69

Copilot AI reviewed Jun 25, 2025

View reviewed changes

joshblack enabled auto-merge June 25, 2025 21:56

refactor: update primitives imports

1283694

github-actions bot requested a deployment to storybook-preview-6236 June 25, 2025 21:59 Abandoned

joshblack deployed to github-pages June 25, 2025 22:11 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-6236 June 25, 2025 22:12 Inactive

joshblack added 2 commits June 25, 2025 17:30

chore: fix eslint errors

c2959ed

Merge branch 'main' of github.com:primer/react into refactor/update-t…

10ea7cf

…ests-to-vitest-6-25

github-actions bot requested a deployment to storybook-preview-6236 June 25, 2025 22:33 Abandoned

joshblack deployed to github-pages June 25, 2025 22:46 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-6236 June 25, 2025 22:47 Inactive

joshblack added 2 commits June 26, 2025 14:13

chore: fix eslint violations

4fb5405

Merge branch 'main' of github.com:primer/react into refactor/update-t…

1b3e867

…ests-to-vitest-6-25

chore: fix eslint error

ca247b4

github-actions bot requested a deployment to storybook-preview-6236 June 26, 2025 19:25 Abandoned

joshblack deployed to github-pages June 26, 2025 19:37 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-6236 June 26, 2025 19:38 Inactive

joshblack added 2 commits June 27, 2025 11:25

Merge branch 'main' of github.com:primer/react into refactor/update-t…

08a0eb1

…ests-to-vitest-6-25

chore: update stylelintignore and lint issues for vitest css

08fc3ca

joshblack deployed to github-pages June 27, 2025 16:44 — with GitHub Actions View deployment

github-actions bot deployed to storybook-preview-6236 June 27, 2025 16:44 View deployment

TylerJDev approved these changes Jun 27, 2025

View reviewed changes

joshblack added this pull request to the merge queue Jun 27, 2025

Merged via the queue into main with commit 5ba1d6c Jun 27, 2025
35 checks passed

joshblack deleted the refactor/update-tests-to-vitest-6-25 branch June 27, 2025 20:00

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Update vitest config and TreeView tests to Vitest #6236

Update vitest config and TreeView tests to Vitest #6236

Uh oh!

joshblack commented Jun 25, 2025

Uh oh!

changeset-bot bot commented Jun 25, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Jun 25, 2025

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Jun 25, 2025

Uh oh!

Copilot AI Jun 25, 2025

Uh oh!

Copilot AI Jun 25, 2025

Uh oh!

github-actions bot commented Jun 25, 2025 •

edited

Loading

Uh oh!

TylerJDev left a comment

Uh oh!

Uh oh!

Uh oh!

	it('should should return a position', async () => {
	it('should return a position', async () => {

Update vitest config and TreeView tests to Vitest #6236

Update vitest config and TreeView tests to Vitest #6236

Uh oh!

Conversation

joshblack commented Jun 25, 2025

Changelog

New

Changed

Removed

Rollout strategy

Uh oh!

changeset-bot bot commented Jun 25, 2025 • 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 Jun 25, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI Jun 25, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jun 25, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jun 25, 2025

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Jun 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

size-limit report 📦

Uh oh!

TylerJDev left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

changeset-bot bot commented Jun 25, 2025 •

edited

Loading

github-actions bot commented Jun 25, 2025 •

edited

Loading