chore(deps-dev): bump the vitest group with 4 updates

eslint.config.mjs

@@ -273,6 +273,7 @@ const config = defineConfig([
     },
     rules: {
       ...vitest.configs.recommended.rules,
+      'vitest/no-conditional-expect': 'off',
     },
     settings: {
       vitest: {

package.json

@@ -60,9 +60,9 @@
     "@primer/stylelint-config": "13.4.1",
     "@size-limit/preset-big-lib": "11.2.0",
     "@types/semver": "^7.7.1",
-    "@vitest/browser": "^4.0.3",
-    "@vitest/browser-playwright": "^4.0.3",
-    "@vitest/eslint-plugin": "^1.3.24",
+    "@vitest/browser": "^4.0.15",
+    "@vitest/browser-playwright": "^4.0.15",
+    "@vitest/eslint-plugin": "^1.5.2",
     "babel-plugin-react-compiler": "^1.0.0",
     "change-case": "^5.4.4",
     "eslint": "^9.39.1",
@@ -91,7 +91,7 @@
     "turbo": "^2.5.5",
     "typescript": "^5.9.2",
     "typescript-eslint": "^8.40.0",
-    "vitest": "^4.0.3"
+    "vitest": "^4.0.15"
   },
   "optionalDependencies": {
     "@rollup/rollup-linux-x64-gnu": "^4.53.3"

packages/react/src/Heading/__tests__/Heading.test.tsx

@@ -25,7 +25,7 @@ describe('Heading', () => {
   })
 
   // How can we test for generated class names?
-  it.skip('should only include css modules class', () => {
+  it.todo('should only include css modules class', () => {
     render(<Heading>test</Heading>)
     expect(screen.getByText('test')).toHaveClass('prc-Heading-Heading-6CmGO')
     // Note: this is the generated class name when CSS modules is used

packages/react/src/Overlay/Overlay.test.tsx

@@ -202,7 +202,7 @@ describe('Overlay', () => {
     spy.mockRestore()
   })
 
-  it.skip('should right align when given `right: 0` and `position: fixed`', async () => {
+  it.todo('should right align when given `right: 0` and `position: fixed`', async () => {
     const spy = vi.spyOn(console, 'log').mockImplementation(message => {
       if (!message.startsWith('global handler')) {
         throw new Error(
@@ -228,7 +228,7 @@ describe('Overlay', () => {
     spy.mockRestore()
   })
 
-  it.skip('should left align when not given position and left props', async () => {
+  it.todo('should left align when not given position and left props', async () => {
     const spy = vi.spyOn(console, 'log').mockImplementation(message => {
       if (!message.startsWith('global handler')) {
         throw new Error(
@@ -293,7 +293,7 @@ describe('Overlay', () => {
     expect(container.queryByLabelText('Change issue title')).not.toBeInTheDocument()
   })
 
-  it.skip('memex repro: should not leak overlay events to the document', async () => {
+  it.todo('memex repro: should not leak overlay events to the document', async () => {
     const user = userEvent.setup()
     const mockHandler = vi.fn()
     const BugRepro1802 = () => {

packages/react/src/PageLayout/PageLayout.test.tsx

@@ -61,7 +61,7 @@ describe('PageLayout', async () => {
   })
 
   // The test suite can't compute styles so skipping
-  it.skip('can hide pane when narrow', () => {
+  it.todo('can hide pane when narrow', () => {
     // Set narrow viewport
     act(() => {
       window.matchMedia(viewportRanges.narrow)
@@ -80,7 +80,7 @@ describe('PageLayout', async () => {
   })
 
   // The test suite can't compute styles so skipping
-  it.skip('shows all subcomponents by default', () => {
+  it.todo('shows all subcomponents by default', () => {
     // Set regular viewport
     act(() => {
       matchMedia(viewportRanges.regular)

packages/react/src/PageLayout/__snapshots__/PageLayout.test.tsx.snap

@@ -373,91 +373,3 @@ exports[`PageLayout > renders with dividers 1`] = `
   </div>
 </div>
 `;
-
-exports[`PageLayout renders pane in different position when narrow 1`] = `
-<div>
-  <div
-    class="PageLayoutRoot"
-    style="--spacing: var(--spacing-normal);"
-  >
-    <div
-      class="PageLayoutWrapper"
-      data-width="xlarge"
-    >
-      <header
-        class="Header"
-        style="--spacing: var(--spacing-normal);"
-      >
-        <div
-          class="HeaderContent"
-          style="--spacing: var(--spacing-none);"
-        >
-          Header
-        </div>
-        <div
-          class="HorizontalDivider HeaderHorizontalDivider"
-          data-variant="none"
-          style="--spacing-divider: var(--spacing-normal); --spacing: var(--spacing-normal);"
-        />
-      </header>
-      <div
-        class="PageLayoutContent"
-      >
-        <main
-          class="ContentWrapper"
-          data-is-hidden="false"
-        >
-          <div
-            class="Content"
-            data-width="full"
-            style="--spacing: var(--spacing-none);"
-          >
-            Content
-          </div>
-        </main>
-        <div
-          class="PaneWrapper"
-          data-is-hidden="false"
-          data-position="end"
-          style="--offset-header: 0px; --spacing-row: var(--spacing-normal); --spacing-column: var(--spacing-normal);"
-        >
-          <div
-            class="HorizontalDivider PaneHorizontalDivider"
-            data-position="end"
-            data-variant="none"
-            style="--spacing-divider: var(--spacing-normal); --spacing: var(--spacing-normal);"
-          />
-          <div
-            class="Pane"
-            style="--spacing: var(--spacing-none); --pane-min-width: 256px; --pane-max-width: calc(100vw - var(--pane-max-width-diff)); --pane-width-size: var(--pane-width-medium); --pane-width: 296px;"
-          >
-            Pane
-          </div>
-          <div
-            class="VerticalDivider PaneVerticalDivider"
-            data-position="end"
-            data-variant="none"
-            style="--spacing: var(--spacing-normal);"
-          />
-        </div>
-      </div>
-      <footer
-        class="FooterWrapper"
-        style="--spacing: var(--spacing-normal);"
-      >
-        <div
-          class="HorizontalDivider FooterHorizontalDivider"
-          data-variant="none"
-          style="--spacing-divider: var(--spacing-normal); --spacing: var(--spacing-normal);"
-        />
-        <div
-          class="FooterContent"
-          style="--spacing: var(--spacing-none);"
-        >
-          Footer
-        </div>
-      </footer>
-    </div>
-  </div>
-</div>
-`;

packages/react/src/Stack/__tests__/Stack.test.tsx

@@ -102,7 +102,7 @@ describe('Stack', () => {
 
   describe('gap', () => {
     // Fix when we have a better way to test this
-    it.skip('should set the default gap to `normal`', () => {
+    it.todo('should set the default gap to `normal`', () => {
       render(<Stack data-testid="stack" />)
       expect(screen.getByTestId('stack')).toHaveStyle('gap: var(--stack-gap,var(--stack-gap-normal,1rem));')
     })

packages/react/src/__tests__/BaseStyles.test.tsx

@@ -8,7 +8,7 @@ describe('BaseStyles', () => {
     expect(container).toMatchSnapshot()
   })
 
-  it.skip('respects styling props', () => {
+  it.todo('respects styling props', () => {
     const styles = {
       color: '#f00',
       fontFamily: 'Arial',

packages/react/src/__tests__/ThemeProvider.test.tsx

@@ -70,7 +70,7 @@ it('works in auto mode', () => {
 })
 
 // TODO: need to wire up a prefers color scheme mock, vitest-matchmedia-mock?
-it.skip('works in auto mode (dark)', () => {
+it.todo('works in auto mode (dark)', () => {
   const matchMediaSpy = vi.spyOn(window, 'matchMedia').mockImplementation(query => ({
     matches: true, // enable dark mode
     media: query,