Merge pull request #29595 from storybookjs/yann/fix-e2e-flake-discrep…

…ancy-test

Addon Test: Optimize internal dependencies

(cherry picked from commit cb66c33)

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';

code/core/src/manager/components/sidebar/TestingModule.tsx

@@ -175,10 +175,10 @@ const DynamicInfo = ({ state }: { state: TestProviders[keyof TestProviders] }) =
   const Title = state.title;
   return (
     <Info>
-      <TitleWrapper crashed={state.crashed}>
+      <TitleWrapper crashed={state.crashed} id="testing-module-title">
         <Title {...state} />
       </TitleWrapper>
-      <DescriptionWrapper>
+      <DescriptionWrapper id="testing-module-description">
         <Description {...state} />
       </DescriptionWrapper>
     </Info>
@@ -244,7 +244,7 @@ export const TestingModule = ({
         >
           <Content ref={contentRef}>
             {testProviders.map((state) => (
-              <TestProvider key={state.id}>
+              <TestProvider key={state.id} data-module-id={state.id}>
                 <DynamicInfo state={state} />
                 <Actions>
                   {state.watchable && (

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',

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",

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,
   }) => {

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';
 

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