test(project): add support for vitest browser tests #5989
Conversation
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
|
joshblack
added
skip changeset
|
👋 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! |
github-actions
bot
added
the
integration-tests: recommended
size-limit report 📦
|
joshblack
requested review from
hectahertz,
jonrohan,
TylerJDev and
francinelucca
There was a problem hiding this comment.
Pull Request Overview
Adds incremental Vitest support and configures browser-based testing while transitioning tests from Jest to Vitest.
- Updates build and test configs to include Vitest files and ignore migrated Jest directories
- Migrates most component and utility tests from
jest.*tovitestimports andvi.*calls, including snapshot updates - Adds Vitest setup, PostCSS Vitest config, and a new CI step to run Vitest tests
Reviewed Changes
Copilot reviewed 27 out of 27 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| packages/react/tsconfig.build.json | Includes vitest.config.mts and new config files in the build input |
| packages/react/src/Stack/tests/StackItem.test.tsx | Imports Vitest globals and replaces jest.fn with vi.fn |
| packages/react/src/Stack/tests/Stack.test.tsx | Imports Vitest globals and replaces jest.fn with vi.fn |
| packages/react/src/FeatureFlags/tests/FeatureFlags.test.tsx | Adds Vitest imports for browser-based FeatureFlags tests |
| packages/react/src/DataTable/tests/sorting.test.ts | Imports Vitest globals for sorting tests |
| packages/react/src/DataTable/tests/Table.test.tsx | Removes Jest skip and migrates to Vitest globals |
| packages/react/src/DataTable/tests/Pagination.test.tsx | Adds browser context viewport setup and migrates to vi.* |
| packages/react/src/DataTable/tests/ErrorDialog.test.tsx | Migrates from jest.fn to vi.fn in ErrorDialog tests |
| packages/react/src/DataTable/tests/DataTable.test.tsx | Migrates jest.spyOn and jest.fn calls to Vitest equivalents |
| packages/react/src/Banner/snapshots/Banner.test.tsx.snap | Updates snapshot header and snapshot formatting for Vitest |
| packages/react/src/Banner/Banner.test.tsx | Migrates from Jest to Vitest imports and calls, removes prior Jest error suppression block |
| packages/react/jest.config.js | Adds modulePathIgnorePatterns to skip test dirs now under Vitest |
| packages/react/config/vitest/setup.ts | Sets up global cleanup and jest-dom matchers for Vitest |
| packages/postcss-preset-primer/vitest.config.ts | Adds Vitest configuration for the PostCSS preset |
| packages/postcss-preset-primer/tsconfig.json | Includes vitest.config.ts in TypeScript compilation |
| packages/postcss-preset-primer/src/tests/preset.test.ts | Migrates from Jest environment directive to Vitest imports |
| packages/postcss-preset-primer/src/tests/snapshots/preset.test.ts.snap | Updates snapshot headers and formatting for Vitest |
| packages/postcss-preset-primer/jest.config.cjs | Removes legacy Jest config now replaced by Vitest |
| package.json | Adds vitest and @vitest/browser dependencies |
| .github/workflows/ci.yml | Adds a CI step to run Vitest tests in a browser container |
Comments suppressed due to low confidence (3)
packages/react/src/Banner/Banner.test.tsx:7
- The prior Jest-based
console.errorsuppression for jsdom CSS parse errors was removed, which may cause test failures or noise. Reintroduce a mock or filter aroundconsole.errorto suppress the knownCould not parse CSS stylesheeterrors.
describe('Banner', () => {
packages/react/src/DataTable/tests/sorting.test.ts:4
- [nitpick] The constant
Secondis PascalCase and singular. Rename toSECONDor a more descriptive name likeMILLISECONDS_IN_SECONDto follow constant naming conventions.
const Second = 1000
.github/workflows/ci.yml:71
- The Vitest CI step uses a Playwright Docker image without mounting the workspace, so the tests and dependencies won’t be available. Consider running Vitest directly on the runner (e.g.,
run: npx vitest) or correctly mounting the repository inside the container.
uses: docker://mcr.microsoft.com/playwright:v1.51.0-jammy
| import React from 'react' | ||
| import {Pagination} from '../Pagination' | ||
| import {render, screen} from '@testing-library/react' | ||
| import userEvent from '@testing-library/user-event' | ||
|
|
||
| describe('Table.Pagination', () => { | ||
| beforeEach(async () => { | ||
| await page.viewport(1400, 728) |
There was a problem hiding this comment.
Playwright’s API no longer uses page.viewport. Replace with await page.setViewportSize({ width: 1400, height: 728 }) to ensure the viewport is set correctly.
Suggested change
| await page.viewport(1400, 728) | |
| await page.setViewportSize({ width: 1400, height: 728 }) |
Copilot uses AI. Check for mistakes.
jonrohan
approved these changes
May 1, 2025
francinelucca
approved these changes
May 2, 2025
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Add support for vitest browser tests to Primer React.
This change introduces a strategy for how we could incrementally move our tests in Jest over to Vitest. We can configure Vitest to include specific files and exclude them from Jest in order to gradually transition from one test runner to another.
One notable challenge in doing a wholesale migration is that there are currently certain tests that require more work to update to Vitest. In addition, our test helpers (like for matchers and global stubs) can also make certain tests difficult to migrate.
However, a large number of tests can be updated through the following steps:
vitestjest.*calls withvi.*callsVitest is also configured to run tests within the context of a browser. This means that our styles are brought into the page and we can rely on them being present when writing our tests.
Curious to hear what you all think! Would you support a gradual transition over to Vitest? Would you prefer sticking with Jest? Let me know!