[WIP] test: add S2 tests

bin/imports.js

@@ -22,7 +22,15 @@ const devDependencies = new Set([
   '@parcel/macros',
   '@adobe/spectrum-tokens',
   'playwright',
-  'axe-playwright'
+  'axe-playwright',
+  'vitest',
+  '@vitejs/plugin-react',
+  '@vitest/browser',
+  '@vitest/browser-playwright',
+  '@vitest/ui',
+  'unplugin-parcel-macros',
+  'vite',
+  'vite-plugin-svgr'
 ]);
 
 module.exports = {

package.json

@@ -36,6 +36,7 @@
     "start:mcp": "yarn workspace @react-spectrum/s2-docs generate:md && yarn build:mcp && node packages/dev/mcp/s2/dist/index.js && node packages/dev/mcp/react-aria/dist/index.js",
     "test:mcp": "yarn build:s2-docs && yarn build:mcp && node packages/dev/mcp/scripts/smoke-list-pages.mjs",
     "test": "cross-env STRICT_MODE=1 VIRT_ON=1 yarn jest",
+    "test:s2": "yarn workspace @react-spectrum/s2 test",
     "test:lint": "node packages/**/*.test-lint.js",
     "test-loose": "cross-env VIRT_ON=1 yarn jest",
     "test-storybook": "test-storybook --url http://localhost:9003  --browsers chromium --no-cache",
@@ -138,6 +139,8 @@
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
     "@typescript/native-preview": "^7.0.0-dev.20251223.1",
+    "@vitest/browser-playwright": "^4.0.17",
+    "@vitest/browser-preview": "^4.0.17",
     "@yarnpkg/types": "^4.0.0",
     "autoprefixer": "^9.6.0",
     "axe-playwright": "^1.1.11",
@@ -204,6 +207,9 @@
     "typescript": "^5.8.2",
     "typescript-eslint": "^8.38.0",
     "verdaccio": "^6.0.0",
+    "vite-plugin-svgr": "^4.5.0",
+    "vitest": "^4.0.17",
+    "vitest-browser-react": "^2.0.2",
     "walk-object": "^4.0.0",
     "xml": "^1.0.1"
   },

packages/@react-spectrum/s2/package.json

@@ -137,16 +137,32 @@
   "scripts": {
     "prepublishOnly": "rm -rf dist/page.cjs* && mv dist/page*.css page.css && mv dist/page.css.map page.css.map || true",
     "prepack": "npm pkg delete scripts devDependencies resolutions alias targets",
-    "postpack": "git checkout -- package.json"
+    "postpack": "git checkout -- package.json",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:ui": "vitest --ui",
+    "test:coverage": "vitest run --coverage"
   },
   "devDependencies": {
     "@adobe/spectrum-tokens": "^14.0.0",
     "@react-aria/test-utils": "^1.0.0-alpha.8",
     "@storybook/jest": "^0.2.3",
     "@testing-library/dom": "^10.1.0",
+    "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.0.0",
-    "jest": "^29.5.0"
+    "@vitejs/plugin-react": "^4.3.4",
+    "@vitest/browser": "^4.0.0",
+    "@vitest/browser-playwright": "^4.0.0",
+    "@vitest/ui": "^4.0.0",
+    "glob": "^10.3.0",
+    "jsdom": "^25.0.0",
+    "playwright": "^1.45.3",
+    "unplugin-parcel-macros": "^0.1.2-alpha.1",
+    "vite": "^6.0.0",
+    "vite-plugin-svgr": "^4.3.0",
+    "vitest": "^4.0.0",
+    "vitest-browser-react": "^2.0.2"
   },
   "dependencies": {
     "@internationalized/date": "^3.10.1",

packages/@react-spectrum/s2/test/Accordion.test.tsx

@@ -0,0 +1,41 @@
+/*
+ * Copyright 2026 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {
+  Accordion,
+  AccordionItem,
+  AccordionItemPanel,
+  AccordionItemTitle
+} from '../src';
+import {describe, expect, it} from 'vitest';
+import React from 'react';
+import {render} from './utils/render';
+import {style} from '../style' with {type: 'macro'};
+
+describe('Accordion', () => {
+  it('renders', async () => {
+    const {container} = await render(
+      <Accordion styles={style({width: 220})}>
+        <AccordionItem id="personal">
+          <AccordionItemTitle>Personal Information</AccordionItemTitle>
+          <AccordionItemPanel>Personal information form here.</AccordionItemPanel>
+        </AccordionItem>
+        <AccordionItem id="billing">
+          <AccordionItemTitle>Billing Address</AccordionItemTitle>
+          <AccordionItemPanel>Billing address form here.</AccordionItemPanel>
+        </AccordionItem>
+      </Accordion>
+    );
+    const buttons = container.querySelectorAll('button');
+    expect(buttons.length).toBe(2);
+  });
+});

packages/@react-spectrum/s2/test/ActionBar.test.tsx

@@ -0,0 +1,81 @@
+/*
+ * Copyright 2026 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {
+  ActionBar,
+  ActionButton,
+  Cell,
+  Column,
+  Row,
+  TableBody,
+  TableHeader,
+  TableView,
+  Text
+} from '../src';
+import Copy from '@react-spectrum/s2/icons/Copy';
+import Delete from '@react-spectrum/s2/icons/Delete';
+import {describe, expect, it} from 'vitest';
+import Edit from '@react-spectrum/s2/icons/Edit';
+import React from 'react';
+import {render} from './utils/render';
+import {style} from '../style' with {type: 'macro'};
+
+describe('ActionBar', () => {
+  it('renders', async () => {
+    let rows = [
+      {id: 1, name: 'Charizard', type: 'Fire, Flying', level: '67'},
+      {id: 2, name: 'Blastoise', type: 'Water', level: '56'},
+      {id: 3, name: 'Venusaur', type: 'Grass, Poison', level: '83'},
+      {id: 4, name: 'Pikachu', type: 'Electric', level: '100'}
+    ];
+
+    const screen = await render(
+      <TableView
+        aria-label="Table with action bar"
+        selectionMode="multiple"
+        defaultSelectedKeys={[2]}
+        styles={style({width: 'full', height: 250})}
+        renderActionBar={() => (
+          <ActionBar>
+            <ActionButton onPress={() => alert('Edit action')}>
+              <Edit />
+              <Text>Edit</Text>
+            </ActionButton>
+            <ActionButton onPress={() => alert('Copy action')}>
+              <Copy />
+              <Text>Copy</Text>
+            </ActionButton>
+            <ActionButton onPress={() => alert('Delete action')}>
+              <Delete />
+              <Text>Delete</Text>
+            </ActionButton>
+          </ActionBar>
+        )}>
+        <TableHeader>
+          <Column key="name" isRowHeader>Name</Column>
+          <Column key="type">Type</Column>
+          <Column key="level">Level</Column>
+        </TableHeader>
+        <TableBody items={rows}>
+          {item => (
+            <Row>
+              <Cell key="name">{item.name}</Cell>
+              <Cell key="type">{item.type}</Cell>
+              <Cell key="level">{item.level}</Cell>
+            </Row>
+              )}
+        </TableBody>
+      </TableView>
+    );
+    expect(screen.getByText('Edit')).toBeInTheDocument();
+  });
+});

packages/@react-spectrum/s2/test/ActionButton.test.tsx

@@ -0,0 +1,23 @@
+/*
+ * Copyright 2026 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {ActionButton} from '../src';
+import {describe, expect, it} from 'vitest';
+import React from 'react';
+import {render} from './utils/render';
+
+describe('ActionButton', () => {
+  it('renders', async () => {
+    const screen = await render(<ActionButton>Action</ActionButton>);
+    await expect.element(screen.getByRole('button')).toBeInTheDocument();
+  });
+});

packages/@react-spectrum/s2/test/ActionButtonGroup.test.tsx

@@ -11,55 +11,31 @@
  */
 
 import {ActionButton, ActionButtonGroup, Text} from '../src';
-import {render} from '@react-spectrum/test-utils-internal';
+import Copy from '@react-spectrum/s2/icons/Copy';
+import Cut from '@react-spectrum/s2/icons/Cut';
+import {describe, expect, it} from 'vitest';
+import Paste from '@react-spectrum/s2/icons/Paste';
+import {render} from './utils/render';
 
 describe('ActionButtonGroup', () => {
-
-  it('can disable all buttons from the group', async () => {
-    let {getAllByRole} = render(
-      <ActionButtonGroup isDisabled>
-        <ActionButton><Text slot="label">Bold</Text></ActionButton>
-        <ActionButton><Text slot="label">Italic</Text></ActionButton>
-        <ActionButton><Text slot="label">Underline</Text></ActionButton>
-      </ActionButtonGroup>
-    );
-
-
-    let buttons = getAllByRole('button');
-    expect(buttons[0]).toBeDisabled();
-    expect(buttons[1]).toBeDisabled();
-    expect(buttons[2]).toBeDisabled();
-  });
-
-  it('can set disable individually', async () => {
-    let {getAllByRole} = render(
+  it('renders', async () => {
+    const screen = await render(
       <ActionButtonGroup>
-        <ActionButton isDisabled><Text slot="label">Bold</Text></ActionButton>
-        <ActionButton><Text slot="label">Italic</Text></ActionButton>
-        <ActionButton><Text slot="label">Underline</Text></ActionButton>
+        <ActionButton>
+          <Cut />
+          <Text>Cut</Text>
+        </ActionButton>
+        <ActionButton>
+          <Copy />
+          <Text>Copy</Text>
+        </ActionButton>
+        <ActionButton>
+          <Paste />
+          <Text>Paste</Text>
+        </ActionButton>
       </ActionButtonGroup>
     );
-
-
-    let buttons = getAllByRole('button');
-    expect(buttons[0]).toBeDisabled();
-    expect(buttons[1]).not.toBeDisabled();
-    expect(buttons[2]).not.toBeDisabled();
-  });
-
-  it('can override the group disable', async () => {
-    let {getAllByRole} = render(
-      <ActionButtonGroup isDisabled>
-        <ActionButton isDisabled={false}><Text slot="label">Bold</Text></ActionButton>
-        <ActionButton><Text slot="label">Italic</Text></ActionButton>
-        <ActionButton><Text slot="label">Underline</Text></ActionButton>
-      </ActionButtonGroup>
-    );
-
-
-    let buttons = getAllByRole('button');
-    expect(buttons[0]).not.toBeDisabled();
-    expect(buttons[1]).toBeDisabled();
-    expect(buttons[2]).toBeDisabled();
+    const buttons = screen.container.querySelectorAll('button');
+    expect(buttons.length).toBe(3);
   });
 });

packages/@react-spectrum/s2/test/ActionMenu.test.tsx

@@ -0,0 +1,53 @@
+/*
+ * Copyright 2026 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {ActionMenu, Keyboard, MenuItem, Text} from '../src';
+import Copy from '@react-spectrum/s2/icons/Copy';
+import Cut from '@react-spectrum/s2/icons/Cut';
+import {describe, expect, it} from 'vitest';
+import Paste from '@react-spectrum/s2/icons/Paste';
+import React from 'react';
+import {render} from './utils/render';
+
+describe('ActionMenu', () => {
+  it('renders', async () => {
+    const screen = await render(
+      <ActionMenu>
+        <MenuItem
+          textValue="Copy"
+          onAction={() => alert('copy')}>
+          <Copy />
+          <Text slot="label">Copy</Text>
+          <Text slot="description">Copy the selected text</Text>
+          <Keyboard>⌘C</Keyboard>
+        </MenuItem>
+        <MenuItem
+          textValue="Cut"
+          onAction={() => alert('cut')}>
+          <Cut />
+          <Text slot="label">Cut</Text>
+          <Text slot="description">Cut the selected text</Text>
+          <Keyboard>⌘X</Keyboard>
+        </MenuItem>
+        <MenuItem
+          textValue="Paste"
+          onAction={() => alert('paste')}>
+          <Paste />
+          <Text slot="label">Paste</Text>
+          <Text slot="description">Paste the copied text</Text>
+          <Keyboard>⌘V</Keyboard>
+        </MenuItem>
+      </ActionMenu>
+    );
+    expect(screen.getByRole('button')).toBeInTheDocument();
+  });
+});

packages/@react-spectrum/s2/test/AlertDialog.test.tsx

@@ -0,0 +1,37 @@
+/*
+ * Copyright 2026 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {ActionButton, AlertDialog, DialogTrigger} from '../src';
+import {describe, expect, it, vi} from 'vitest';
+import React from 'react';
+import {render} from './utils';
+
+describe('AlertDialog', () => {
+  it('renders', async () => {
+    vi.useFakeTimers();
+    const screen = await render(
+      <DialogTrigger defaultOpen>
+        <ActionButton>Open</ActionButton>
+        <AlertDialog
+          title="Delete Item"
+          variant="destructive"
+          primaryActionLabel="Delete"
+          cancelLabel="Cancel">
+          Are you sure you want to delete this item?
+        </AlertDialog>
+      </DialogTrigger>
+    );
+    vi.runAllTimers();
+    expect(screen.getByRole('alertdialog')).toBeInTheDocument();
+    vi.useRealTimers();
+  });
+});