deps: Reclassify @storybook/test as a project (not just dev) dependency

package.json

@@ -50,6 +50,7 @@
     "@cfpb/cfpb-forms": "^0.35.0",
     "@cfpb/cfpb-icons": "^1.2.0",
     "@storybook/client-api": "^7.6.17",
+    "@storybook/test": "^8.5.0",
     "classnames": "^2.3.2",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
@@ -68,7 +69,6 @@
     "@storybook/manager-api": "^8.5.0",
     "@storybook/react": "^8.5.0",
     "@storybook/react-vite": "^8.5.0",
-    "@storybook/test": "^8.5.0",
     "@storybook/theming": "^8.5.0",
     "@testing-library/cypress": "8.0.7",
     "@testing-library/dom": "8.19.0",

src/components/Alert/Alert.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { ReactNode } from 'react';
+import type { ReactNode } from 'react';
 import { Alert, AlertFieldLevel, Icon, Link, TextInput } from '~/src/index';
 import type { TextInputStatusType } from '../TextInput/TextInputStatus';
 

src/components/Expandable/Expandable.stories.tsx

@@ -1,6 +1,5 @@
-import { expect } from '@storybook/test';
 import type { Meta, StoryObj } from '@storybook/react';
-import { userEvent, within } from '@storybook/test';
+import { expect, userEvent, within } from '@storybook/test';
 import { Expandable } from '~/src/index';
 import { sleep } from '../../utils/sleep';
 
@@ -59,31 +58,31 @@ export const TestExpandCollapse: Story = {
     await sleep(waitTime);
 
     const heading = canvas.getByText(OpenOnLoad.args?.header ?? '');
-    expect(heading).toBeInTheDocument();
+    await expect(heading).toBeInTheDocument();
 
     // Content wrapper collapsed
     const showHide = canvas.getByRole('button');
-    expect(showHide.getAttribute('aria-expanded')).toMatch('false');
+    await expect(showHide.getAttribute('aria-expanded')).toMatch('false');
 
     // Content hidden
     const content = canvas.queryByText(/lorem ipsum/gi);
-    expect(content).not.toBeVisible();
+    await expect(content).not.toBeVisible();
 
     // Toggle
-    userEvent.click(showHide);
+    await userEvent.click(showHide);
     await sleep(waitTime);
 
     // Content visible
-    expect(showHide.getAttribute('aria-expanded')).toMatch('true');
-    expect(content).toBeVisible();
+    await expect(showHide.getAttribute('aria-expanded')).toMatch('true');
+    await expect(content).toBeVisible();
 
     // Toggle
-    userEvent.click(showHide);
+    await userEvent.click(showHide);
     await sleep(waitTime);
 
     // Content hidden
-    expect(showHide.getAttribute('aria-expanded')).toMatch('false');
-    expect(content).not.toBeVisible();
+    await expect(showHide.getAttribute('aria-expanded')).toMatch('false');
+    await expect(content).not.toBeVisible();
   },
   args: {
     ...Default.args,

src/components/Expandable/ExpandableGroup.stories.tsx

@@ -1,6 +1,5 @@
-import { expect } from '@storybook/test';
 import type { Meta, StoryObj } from '@storybook/react';
-import { userEvent, waitFor, within } from '@storybook/test';
+import { expect, userEvent, waitFor, within } from '@storybook/test';
 import type { JSX } from 'react';
 import { sleep } from '../../utils/sleep';
 import { Expandable } from './Expandable';
@@ -72,7 +71,7 @@ export const Default: Story = {
     const element = await canvas.findByTitle('Expandable A');
 
     // Helpers
-    const expectAriaExpanded = (isExpanded: string): void =>
+    const expectAriaExpanded = async (isExpanded: string): Promise<void> =>
       expect(element.ariaExpanded).toBe(isExpanded);
 
     // Test
@@ -81,13 +80,13 @@ export const Default: Story = {
     });
 
     await step('Click to expanded', async () => {
-      userEvent.click(element);
+      await userEvent.click(element);
       await waitFor(async () => expectAriaExpanded('true'), options);
       await sleep(timeout);
     });
 
     await step('Click to collapse', async () => {
-      userEvent.click(element);
+      await userEvent.click(element);
       await waitFor(async () => expectAriaExpanded('false'), options);
     });
   },

src/components/Table/Table.tsx

@@ -1,6 +1,6 @@
 import classNames from 'classnames';
-import type { ForwardedRef, HTMLProps } from 'react';
-import { forwardRef, useId, type ReactNode } from 'react';
+import type { ForwardedRef, HTMLProps, ReactNode } from 'react';
+import { forwardRef, useId } from 'react';
 import type { JSXElement } from '~/src/types/jsxElement';
 import { type WidthPercent } from '../../types/WidthPercent';
 import { Pagination } from '../Pagination/Pagination';

src/components/TextInput/TextArea.tsx

@@ -1,6 +1,6 @@
 import classNames from 'classnames';
-import type { JSX, ReactElement, Ref } from 'react';
-import { forwardRef, type ChangeEventHandler } from 'react';
+import type { ChangeEventHandler, JSX, ReactElement, Ref } from 'react';
+import { forwardRef } from 'react';
 import { noOp as onNoOp } from '~/src/utils/noOp';
 import {
   getTextInputStatusClass,

src/components/TextInput/TextInput.tsx

@@ -1,6 +1,6 @@
 import classnames from 'classnames';
-import type { ComponentPropsWithoutRef, JSX } from 'react';
-import { forwardRef, type ReactNode } from 'react';
+import type { ComponentPropsWithoutRef, JSX, ReactNode } from 'react';
+import { forwardRef } from 'react';
 import type { TextInputStatusType } from './TextInputStatus';
 import { getTextInputStatusClass } from './TextInputStatus';