From 0a9cfa21f12eb9db1dafa4d0bd922f94296f4d1d Mon Sep 17 00:00:00 2001 From: Mikael Korpela Date: Fri, 17 Jul 2026 21:52:06 +0300 Subject: [PATCH 1/4] Storybook: pre-bundle CJS deps Pre-bundle CJS deps so Vite exposes a default export for Emotion. --- storybook/main.ts | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/storybook/main.ts b/storybook/main.ts index a322c397ed63b8..5526b51f8db927 100644 --- a/storybook/main.ts +++ b/storybook/main.ts @@ -231,6 +231,12 @@ const config: StorybookConfig = { }, }, optimizeDeps: { + // Pre-bundle CJS deps so Vite exposes a default export for Emotion. + include: [ + '@emotion/react', + '@emotion/styled', + 'hoist-non-react-statics', + ], esbuildOptions: { loader: { '.js': 'tsx', From ce68cc128802e00de66c4fadd67cab7510b5075d Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Fri, 17 Jul 2026 23:25:09 +0200 Subject: [PATCH 2/4] Storybook: Preserve Emotion module identity --- storybook/main.ts | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/storybook/main.ts b/storybook/main.ts index 5526b51f8db927..4528f1e81f95e7 100644 --- a/storybook/main.ts +++ b/storybook/main.ts @@ -127,7 +127,7 @@ const config: StorybookConfig = { plugins: [ dsTokenFallbacksJs(), react( { - jsxImportSource: getAbsolutePath( '@emotion/react' ), + jsxImportSource: '@emotion/react', babel: { plugins: [ getAbsolutePath( '@emotion/babel-plugin' ) ], }, @@ -231,12 +231,6 @@ const config: StorybookConfig = { }, }, optimizeDeps: { - // Pre-bundle CJS deps so Vite exposes a default export for Emotion. - include: [ - '@emotion/react', - '@emotion/styled', - 'hoist-non-react-statics', - ], esbuildOptions: { loader: { '.js': 'tsx', From fdd30400f0339ca0b674f28e4d31e67350b155b7 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Fri, 17 Jul 2026 23:25:28 +0200 Subject: [PATCH 3/4] Storybook: Test the development server --- .github/workflows/storybook-check.yml | 7 ++++ test/storybook-playwright/README.md | 2 +- .../specs/dev-server.spec.ts | 33 +++++++++++++++++++ 3 files changed, 41 insertions(+), 1 deletion(-) create mode 100644 test/storybook-playwright/specs/dev-server.spec.ts diff --git a/.github/workflows/storybook-check.yml b/.github/workflows/storybook-check.yml index 3f5b9604f3c1e6..abb2cef160839c 100644 --- a/.github/workflows/storybook-check.yml +++ b/.github/workflows/storybook-check.yml @@ -54,6 +54,13 @@ jobs: npm install --no-save @storybook/test-runner@0.24.2 npx playwright install --with-deps + - name: Test development Storybook + run: | + npx concurrently -k -s first -n "SB,TEST" -c "magenta,blue" \ + "npm run --workspace @wordpress/storybook-playwright storybook:dev" \ + "npx wait-on tcp:127.0.0.1:50241 && \ + npm run test:e2e:storybook -- --grep 'renders the Button story without browser errors'" + - name: Serve Storybook and run tests run: | npx concurrently -k -s first -n "SB,TEST" -c "magenta,blue" \ diff --git a/test/storybook-playwright/README.md b/test/storybook-playwright/README.md index 05097cd54042e1..394e69d4127cae 100644 --- a/test/storybook-playwright/README.md +++ b/test/storybook-playwright/README.md @@ -1,6 +1,6 @@ # Storybook Playwright Tests -This is currently set up for testing visual regressions in the `components` package. The tests do not run on CI, and is meant as a testing tool for local development. +This is primarily set up for testing visual regressions in the `components` package. Visual regression tests do not run on CI and are meant as a testing tool for local development. A focused smoke test runs on CI against the development Storybook server. ## How to run diff --git a/test/storybook-playwright/specs/dev-server.spec.ts b/test/storybook-playwright/specs/dev-server.spec.ts new file mode 100644 index 00000000000000..ab581f27215d0d --- /dev/null +++ b/test/storybook-playwright/specs/dev-server.spec.ts @@ -0,0 +1,33 @@ +/** + * External dependencies + */ +import { expect, test } from '@playwright/test'; + +/** + * Internal dependencies + */ +import { gotoStoryId } from '../utils'; + +test.describe( 'Development Storybook', () => { + test( 'renders the Button story without browser errors', async ( { + page, + } ) => { + const browserErrors: string[] = []; + + page.on( 'console', ( message ) => { + if ( message.type() === 'error' ) { + browserErrors.push( message.text() ); + } + } ); + page.on( 'pageerror', ( error ) => { + browserErrors.push( error.message ); + } ); + + await gotoStoryId( page, 'components-button--variant-states' ); + await expect( + page.getByRole( 'button', { name: 'Code is poetry' } ).first() + ).toBeVisible(); + + expect( browserErrors ).toEqual( [] ); + } ); +} ); From 4ea310ab5f287a7bb6a5729d9d985aaa9ca681d7 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Fri, 17 Jul 2026 23:39:51 +0200 Subject: [PATCH 4/4] Storybook: Remove development server smoke test --- .github/workflows/storybook-check.yml | 7 ---- test/storybook-playwright/README.md | 2 +- .../specs/dev-server.spec.ts | 33 ------------------- 3 files changed, 1 insertion(+), 41 deletions(-) delete mode 100644 test/storybook-playwright/specs/dev-server.spec.ts diff --git a/.github/workflows/storybook-check.yml b/.github/workflows/storybook-check.yml index abb2cef160839c..3f5b9604f3c1e6 100644 --- a/.github/workflows/storybook-check.yml +++ b/.github/workflows/storybook-check.yml @@ -54,13 +54,6 @@ jobs: npm install --no-save @storybook/test-runner@0.24.2 npx playwright install --with-deps - - name: Test development Storybook - run: | - npx concurrently -k -s first -n "SB,TEST" -c "magenta,blue" \ - "npm run --workspace @wordpress/storybook-playwright storybook:dev" \ - "npx wait-on tcp:127.0.0.1:50241 && \ - npm run test:e2e:storybook -- --grep 'renders the Button story without browser errors'" - - name: Serve Storybook and run tests run: | npx concurrently -k -s first -n "SB,TEST" -c "magenta,blue" \ diff --git a/test/storybook-playwright/README.md b/test/storybook-playwright/README.md index 394e69d4127cae..05097cd54042e1 100644 --- a/test/storybook-playwright/README.md +++ b/test/storybook-playwright/README.md @@ -1,6 +1,6 @@ # Storybook Playwright Tests -This is primarily set up for testing visual regressions in the `components` package. Visual regression tests do not run on CI and are meant as a testing tool for local development. A focused smoke test runs on CI against the development Storybook server. +This is currently set up for testing visual regressions in the `components` package. The tests do not run on CI, and is meant as a testing tool for local development. ## How to run diff --git a/test/storybook-playwright/specs/dev-server.spec.ts b/test/storybook-playwright/specs/dev-server.spec.ts deleted file mode 100644 index ab581f27215d0d..00000000000000 --- a/test/storybook-playwright/specs/dev-server.spec.ts +++ /dev/null @@ -1,33 +0,0 @@ -/** - * External dependencies - */ -import { expect, test } from '@playwright/test'; - -/** - * Internal dependencies - */ -import { gotoStoryId } from '../utils'; - -test.describe( 'Development Storybook', () => { - test( 'renders the Button story without browser errors', async ( { - page, - } ) => { - const browserErrors: string[] = []; - - page.on( 'console', ( message ) => { - if ( message.type() === 'error' ) { - browserErrors.push( message.text() ); - } - } ); - page.on( 'pageerror', ( error ) => { - browserErrors.push( error.message ); - } ); - - await gotoStoryId( page, 'components-button--variant-states' ); - await expect( - page.getByRole( 'button', { name: 'Code is poetry' } ).first() - ).toBeVisible(); - - expect( browserErrors ).toEqual( [] ); - } ); -} );