diff --git a/code/addons/test/src/vitest-plugin/index.ts b/code/addons/test/src/vitest-plugin/index.ts
index 458d0292e295..ebe4bb20b281 100644
--- a/code/addons/test/src/vitest-plugin/index.ts
+++ b/code/addons/test/src/vitest-plugin/index.ts
@@ -131,6 +131,16 @@ export const storybookTest = (options?: UserOptions): Plugin => {
config.test.server.deps.inline.push('@storybook/experimental-addon-test');
}
+ config.optimizeDeps ??= {};
+ config.optimizeDeps = {
+ ...config.optimizeDeps,
+ include: [
+ ...(config.optimizeDeps.include ?? []),
+ 'react-dom/test-utils',
+ '@storybook/experimental-addon-test/**',
+ ],
+ };
+
if (frameworkName?.includes('vue3')) {
config.define ??= {};
config.define.__VUE_PROD_HYDRATION_MISMATCH_DETAILS__ = 'false';
diff --git a/code/core/src/manager/components/sidebar/TestingModule.tsx b/code/core/src/manager/components/sidebar/TestingModule.tsx
index c020ebe53f09..510fdc24212c 100644
--- a/code/core/src/manager/components/sidebar/TestingModule.tsx
+++ b/code/core/src/manager/components/sidebar/TestingModule.tsx
@@ -175,10 +175,10 @@ const DynamicInfo = ({ state }: { state: TestProviders[keyof TestProviders] }) =
const Title = state.title;
return (
-
+
-
+
@@ -244,7 +244,7 @@ export const TestingModule = ({
>
{testProviders.map((state) => (
-
+
{state.watchable && (
diff --git a/code/playwright.config.ts b/code/playwright.config.ts
index dee882693c80..5b29fa4cce32 100644
--- a/code/playwright.config.ts
+++ b/code/playwright.config.ts
@@ -3,6 +3,10 @@ import { defineConfig, devices } from '@playwright/test';
/** Read environment variables from file. https://github.com/motdotla/dotenv */
// require('dotenv').config();
+// Comment this out and fill in the values to run E2E tests locally using the Playwright extension easily
+// process.env.STORYBOOK_URL = 'http://localhost:6006';
+// process.env.STORYBOOK_TEMPLATE_NAME = 'react-vite/default-ts';
+
/** See https://playwright.dev/docs/test-configuration. */
export default defineConfig({
testDir: './e2e-tests',
diff --git a/test-storybooks/portable-stories-kitchen-sink/react/.storybook/main.ts b/test-storybooks/portable-stories-kitchen-sink/react/.storybook/main.ts
index fe2baa61d4a6..9a2664c6e951 100644
--- a/test-storybooks/portable-stories-kitchen-sink/react/.storybook/main.ts
+++ b/test-storybooks/portable-stories-kitchen-sink/react/.storybook/main.ts
@@ -3,8 +3,8 @@ import type { StorybookConfig } from "@storybook/react-vite";
const config: StorybookConfig = {
stories: ["../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
addons: [
+ "@storybook/addon-controls",
"@storybook/experimental-addon-test",
- "@storybook/addon-controls"
],
framework: {
name: "@storybook/react-vite",
diff --git a/test-storybooks/portable-stories-kitchen-sink/react/e2e-tests/component-testing.spec.ts b/test-storybooks/portable-stories-kitchen-sink/react/e2e-tests/component-testing.spec.ts
index f14478f0cbea..1882070794ac 100644
--- a/test-storybooks/portable-stories-kitchen-sink/react/e2e-tests/component-testing.spec.ts
+++ b/test-storybooks/portable-stories-kitchen-sink/react/e2e-tests/component-testing.spec.ts
@@ -65,12 +65,22 @@ test.describe("component testing", () => {
if ((await testStoryElement.getAttribute("aria-expanded")) !== "true") {
testStoryElement.click();
}
+
+ const testingModuleDescription = await page.locator('[data-module-id="storybook/test/test-provider"]').locator('#testing-module-description');
- await page.getByRole('button', { name: 'Run tests' }).click();
+ await expect(testingModuleDescription).toContainText('Not run');
+
+ const runTestsButton = await page.getByLabel('Start component tests')
+
+ await runTestsButton.click();
+
+ await expect(testingModuleDescription).toContainText('Testing', { timeout: 60000 });
// Wait for test results to appear
+ await expect(testingModuleDescription).toHaveText(/Ran \d+ tests/, { timeout: 60000 });
+
const errorFilter = page.getByLabel("Toggle errors");
- await expect(errorFilter).toBeVisible({ timeout: 30000 });
+ await expect(errorFilter).toBeVisible();
// Assert discrepancy: CLI pass + Browser fail
const failingStoryElement = page.locator(
@@ -107,18 +117,39 @@ test.describe("component testing", () => {
const sbPage = new SbPage(page, expect);
await sbPage.navigateToStory("addons/test", "Expected Failure");
-
+
// For whatever reason, sometimes it takes longer for the story to load
const storyElement = sbPage
.getCanvasBodyElement()
.getByRole("button", { name: "test" });
await expect(storyElement).toBeVisible({ timeout: 10000 });
- await page.getByRole('button', { name: 'Run tests' }).click();
+ await expect(page.locator('#testing-module-title')).toHaveText('Component tests');
+
+ const testingModuleDescription = await page.locator('[data-module-id="storybook/test/test-provider"]').locator('#testing-module-description');
+
+ await expect(testingModuleDescription).toContainText('Not run');
+
+ const runTestsButton = await page.getByLabel('Start component tests')
+ const watchModeButton = await page.getByLabel('Enable watch mode for Component tests')
+ await expect(runTestsButton).toBeEnabled();
+ await expect(watchModeButton).toBeEnabled();
+
+ await runTestsButton.click();
+
+ await expect(runTestsButton).toBeDisabled();
+ await expect(watchModeButton).toBeDisabled();
+
+ await expect(testingModuleDescription).toContainText('Testing');
// Wait for test results to appear
+ await expect(testingModuleDescription).toHaveText(/Ran \d+ tests/, { timeout: 30000 });
+
+ await expect(runTestsButton).toBeEnabled();
+ await expect(watchModeButton).toBeEnabled();
+
const errorFilter = page.getByLabel("Toggle errors");
- await expect(errorFilter).toBeVisible({ timeout: 30000 });
+ await expect(errorFilter).toBeVisible();
// Assert for expected success
const successfulStoryElement = page.locator(
@@ -147,7 +178,7 @@ test.describe("component testing", () => {
await expect(sidebarItems).toHaveCount(1);
});
- test("should execute tests via testing module UI watch mode", async ({
+ test("should execute watch mode tests via testing module UI", async ({
page,
browserName,
}) => {
diff --git a/test-storybooks/portable-stories-kitchen-sink/react/stories/AddonTest.stories.tsx b/test-storybooks/portable-stories-kitchen-sink/react/stories/AddonTest.stories.tsx
index e6579f3c72d6..55ec4ebe3ee9 100644
--- a/test-storybooks/portable-stories-kitchen-sink/react/stories/AddonTest.stories.tsx
+++ b/test-storybooks/portable-stories-kitchen-sink/react/stories/AddonTest.stories.tsx
@@ -1,3 +1,4 @@
+import { Meta } from '@storybook/react'
import { instrument } from '@storybook/instrumenter'
import type { StoryAnnotations } from 'storybook/internal/types';
diff --git a/test-storybooks/portable-stories-kitchen-sink/react/yarn.lock b/test-storybooks/portable-stories-kitchen-sink/react/yarn.lock
index 958dd6072e37..2041ffe4ec1a 100644
--- a/test-storybooks/portable-stories-kitchen-sink/react/yarn.lock
+++ b/test-storybooks/portable-stories-kitchen-sink/react/yarn.lock
@@ -1769,11 +1769,11 @@ __metadata:
linkType: soft
"@storybook/components@file:../../../code/deprecated/components::locator=portable-stories-react%40workspace%3A.":
- version: 8.4.0-alpha.7
- resolution: "@storybook/components@file:../../../code/deprecated/components#../../../code/deprecated/components::hash=a9048b&locator=portable-stories-react%40workspace%3A."
+ version: 8.5.0-alpha.4
+ resolution: "@storybook/components@file:../../../code/deprecated/components#../../../code/deprecated/components::hash=60237a&locator=portable-stories-react%40workspace%3A."
peerDependencies:
- storybook: "workspace:^"
- checksum: 10/2e10c1adea642a4c1245d18d97ef20aa6a5aae7b0ef0dda10db113e31a76231e68aa263fe62ee966061d2a6841abe069df21be14fb5141dc7df73d17a94ff154
+ storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0
+ checksum: 10/0366ac53c8eed65b69aaa174337d27ec2283c446b328811f92ffc9de0a219860afd2e3bdc5f11c30485c43c21d246ff036bca74429ba307dc557917d14a9beba
languageName: node
linkType: hard
@@ -1829,8 +1829,8 @@ __metadata:
linkType: hard
"@storybook/experimental-addon-test@file:../../../code/addons/test::locator=portable-stories-react%40workspace%3A.":
- version: 8.4.0-alpha.7
- resolution: "@storybook/experimental-addon-test@file:../../../code/addons/test#../../../code/addons/test::hash=82a764&locator=portable-stories-react%40workspace%3A."
+ version: 8.5.0-alpha.4
+ resolution: "@storybook/experimental-addon-test@file:../../../code/addons/test#../../../code/addons/test::hash=6bed1d&locator=portable-stories-react%40workspace%3A."
dependencies:
"@storybook/csf": "npm:^0.1.11"
"@storybook/global": "npm:^5.0.0"
@@ -1853,7 +1853,7 @@ __metadata:
optional: true
vitest:
optional: true
- checksum: 10/e3092244dbfd410cd43a3561d84aa05fe158264e624bc4cb500f2c8efc425f01ec5ead5e25e322a6ebb9cad5f704a52bbd15bf2abc9b7f6e99db89c08f37382e
+ checksum: 10/9d842f824d9891bd19e508d654ce7f9f7cf8c73090588b84f29b2649e68338d13d7cd85a6d4bd92fe6beef276eb12783445bed4a4249563a5986f6f537ccc6d8
languageName: node
linkType: hard
@@ -1886,20 +1886,20 @@ __metadata:
linkType: soft
"@storybook/manager-api@file:../../../code/deprecated/manager-api::locator=portable-stories-react%40workspace%3A.":
- version: 8.4.0-alpha.7
- resolution: "@storybook/manager-api@file:../../../code/deprecated/manager-api#../../../code/deprecated/manager-api::hash=3b0337&locator=portable-stories-react%40workspace%3A."
+ version: 8.5.0-alpha.4
+ resolution: "@storybook/manager-api@file:../../../code/deprecated/manager-api#../../../code/deprecated/manager-api::hash=8c9581&locator=portable-stories-react%40workspace%3A."
peerDependencies:
- storybook: "workspace:^"
- checksum: 10/ad5bff1af09421670ff6b60df46231c737d7d3530c0930995fb4b39060781f7d6f276c0f941d8e534accc5dbae66f564d246e0da018b9c5ca3ee1e811b04f325
+ storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0
+ checksum: 10/20f439e660e49c2bba2ce4fc73ddb9306c04cea9e6eaa0ddc23fc2047e135b7df4cc0b742dc662cee71013051b0d7e9e9e7a4f28323c1734fc6ad024ac47b9db
languageName: node
linkType: hard
"@storybook/preview-api@file:../../../code/deprecated/preview-api::locator=portable-stories-react%40workspace%3A.":
- version: 8.4.0-alpha.7
- resolution: "@storybook/preview-api@file:../../../code/deprecated/preview-api#../../../code/deprecated/preview-api::hash=56e670&locator=portable-stories-react%40workspace%3A."
+ version: 8.5.0-alpha.4
+ resolution: "@storybook/preview-api@file:../../../code/deprecated/preview-api#../../../code/deprecated/preview-api::hash=a7858a&locator=portable-stories-react%40workspace%3A."
peerDependencies:
- storybook: "workspace:^"
- checksum: 10/0242d50ab4d165b926bc389791a3deb76fd0148dc1f39b31ec2ae7e77f017613b87cf0efc89ec8b6ae72128b9cc84b3289e921eaa1940180fc3482d158339fbd
+ storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0
+ checksum: 10/29559a5fd2698758e0bcf5442421fb583da5d95344f9740dcdc3615b3bec3dfb105f134fba08423a1fd1a68fbfa2615c91408271c4ef8926d43c0b5c6f8d0bb8
languageName: node
linkType: hard
@@ -1938,12 +1938,12 @@ __metadata:
version: 0.0.0-use.local
resolution: "@storybook/react@portal:../../../code/renderers/react::locator=portable-stories-react%40workspace%3A."
dependencies:
- "@storybook/components": "workspace:^"
+ "@storybook/components": "workspace:*"
"@storybook/global": "npm:^5.0.0"
- "@storybook/manager-api": "workspace:^"
- "@storybook/preview-api": "workspace:^"
+ "@storybook/manager-api": "workspace:*"
+ "@storybook/preview-api": "workspace:*"
"@storybook/react-dom-shim": "workspace:*"
- "@storybook/theming": "workspace:^"
+ "@storybook/theming": "workspace:*"
peerDependencies:
"@storybook/test": "workspace:*"
react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
@@ -1976,11 +1976,11 @@ __metadata:
linkType: soft
"@storybook/theming@file:../../../code/deprecated/theming::locator=portable-stories-react%40workspace%3A.":
- version: 8.4.0-alpha.7
- resolution: "@storybook/theming@file:../../../code/deprecated/theming#../../../code/deprecated/theming::hash=3f019a&locator=portable-stories-react%40workspace%3A."
+ version: 8.5.0-alpha.4
+ resolution: "@storybook/theming@file:../../../code/deprecated/theming#../../../code/deprecated/theming::hash=74a1c8&locator=portable-stories-react%40workspace%3A."
peerDependencies:
- storybook: "workspace:^"
- checksum: 10/80024449814b032a9156fe2c70ff481fcfd04f5812c818b162dadadad36b9e642e1577ec51fd1330937d30853538c216662aad8f002cc75d088dc73e019afc2d
+ storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0
+ checksum: 10/387dd03f4a10a4a1f6381a9e150a3c4a96a5ce3f6aec4557a954fa3c629630e667a5e60003fed6a5ed31a7844dcd3507bcf996614e1ddb0cda8ad74b6922f3b4
languageName: node
linkType: hard