From 46a838f1cfae6932fd6b64d23058f5b3b1fb9ba2 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Mon, 19 Aug 2024 15:50:06 +0200 Subject: [PATCH 01/27] Implement add command for vitest addon --- code/addons/vitest/package.json | 2 + code/addons/vitest/src/postinstall.ts | 170 +++++++++++++++++++++++++- code/lib/cli-storybook/src/add.ts | 3 +- code/yarn.lock | 2 + 4 files changed, 174 insertions(+), 3 deletions(-) diff --git a/code/addons/vitest/package.json b/code/addons/vitest/package.json index e318fc7f7f59..b504f0e08468 100644 --- a/code/addons/vitest/package.json +++ b/code/addons/vitest/package.json @@ -75,6 +75,8 @@ }, "devDependencies": { "@vitest/browser": "^2.0.0", + "tinyrainbow": "^1.2.0", + "ts-dedent": "^2.2.0", "vitest": "^2.0.0" }, "peerDependencies": { diff --git a/code/addons/vitest/src/postinstall.ts b/code/addons/vitest/src/postinstall.ts index 47bcad1f9349..a7a73eb3721e 100644 --- a/code/addons/vitest/src/postinstall.ts +++ b/code/addons/vitest/src/postinstall.ts @@ -1,3 +1,169 @@ -export default async function postinstall(context: any) { - console.log('[addon-vitest] postinstall with', context); +import { existsSync } from 'node:fs'; +import * as fs from 'node:fs/promises'; +import { writeFile } from 'node:fs/promises'; +import { join, resolve } from 'node:path'; + +import { + JsPackageManagerFactory, + extractProperFrameworkName, + loadAllPresets, + loadMainConfig, +} from 'storybook/internal/common'; +import { logger } from 'storybook/internal/node-logger'; + +import c from 'tinyrainbow'; +import dedent from 'ts-dedent'; + +import { type PostinstallOptions } from '../../../lib/cli-storybook/src/add'; + +export default async function postInstall(options: PostinstallOptions) { + const packageManager = JsPackageManagerFactory.getPackageManager({ + force: options.packageManager, + }); + + const info = await getFrameworkInfo(options); + + if (info.builderPackageName !== '@storybook/builder-vite') { + logger.info('Only @storybook/builder-vite is supported'); + return; + } + + const configFile = resolve('vitest.config.ts'); + if (existsSync(configFile)) { + logger.info('You already have a vitest.config.ts file. Check our docs:'); + return; + } + + const annotationsImport = [ + '@storybook/nextjs', + '@storybook/experimental-nextjs-vite', + '@storybook/sveltekit', + ].includes(info.frameworkPackageName) + ? info.frameworkPackageName + : ['@storybook/react', '@storybook/svelte', '@storybook/vue3'].includes( + info.rendererPackageName + ) + ? info.rendererPackageName + : null; + + if (!annotationsImport) { + logger.info('Your framework is not yet supported for the vitest addon.'); + return; + } + + const vitestInfo = getVitestPluginInfo(info.frameworkPackageName); + + const packages = ['vitest@latest', '@vitest/browser@latest', 'playwright@latest']; + logger.info(c.bold('Installing packages...')); + logger.info(packages.join(', ')); + await packageManager.addDependencies({ installAsDevDependencies: true }, packages); + + await packageManager.executeCommand({ + command: 'npx', + args: ['playwright', 'install', 'chromium', '--with-deps'], + }); + + await writeFile( + resolve(options.configDir, 'vitest.setup.ts'), + dedent` + import { beforeAll } from 'vitest' + import { setProjectAnnotations } from '${annotationsImport}' + import * as projectAnnotations from './preview' + + const project = setProjectAnnotations(projectAnnotations) + + beforeAll(project.beforeAll) + ` + ); + await writeFile( + configFile, + dedent` + import { defineConfig } from "vitest/config"; + import { storybookTest } from "@storybook/experimental-addon-vitest/plugin"; + ${vitestInfo.frameworkPluginImport ? vitestInfo.frameworkPluginImport + '\n' : ''} + export default defineConfig({ + plugins: [ + storybookTest(),${vitestInfo.frameworkPluginCall ? '\n' + vitestInfo.frameworkPluginCall : ''} + ], + test: { + include: ['**/*.{stories}.?(m)[jt]s?(x)'], + browser: { + enabled: true, + name: 'chromium', + provider: 'playwright', + headless: true, + screenshotFailures: false, + }, + isolate: false, + setupFiles: ['./.storybook/vitest.setup.ts'], + }, + }) + ` + ); +} + +const getVitestPluginInfo = (framework: string) => { + let frameworkPluginImport = ''; + let frameworkPluginCall = ''; + + if (framework === '@storybook/nextjs') { + frameworkPluginImport = "import vitePluginNext from 'vite-plugin-storybook-nextjs'"; + frameworkPluginCall = 'vitePluginNext()'; + } + + if (framework === '@storybook/sveltekit') { + frameworkPluginImport = "import { storybookSveltekitPlugin } from '@storybook/sveltekit/vite'"; + frameworkPluginCall = 'storybookSveltekitPlugin()'; + } + + return { frameworkPluginImport, frameworkPluginCall }; +}; + +async function getFrameworkInfo({ configDir, packageManager: pkgMgr }: PostinstallOptions) { + const packageManager = JsPackageManagerFactory.getPackageManager({ force: pkgMgr }); + const packageJson = await packageManager.retrievePackageJson(); + + const config = await loadMainConfig({ configDir, noCache: true }); + const { framework } = config; + + const frameworkName = typeof framework === 'string' ? framework : framework?.name; + + if (!frameworkName) { + throw new Error('Could not detect your storybook framework.'); + } + + const frameworkPackageName = extractProperFrameworkName(frameworkName); + + const presets = await loadAllPresets({ + corePresets: [join(frameworkName, 'preset')], + overridePresets: [ + require.resolve('@storybook/core/core-server/presets/common-override-preset'), + ], + configDir, + packageJson, + isCritical: true, + }); + + const core = await presets.apply('core', {}); + + const { builder, renderer } = core; + + if (!builder || !renderer) { + throw new Error('Could not detect your storybook framework.'); + } + + const builderPackageJson = await fs.readFile( + `${typeof builder === 'string' ? builder : builder.name}/package.json`, + 'utf8' + ); + const builderPackageName = JSON.parse(builderPackageJson).name; + + const rendererPackageJson = await fs.readFile(`${renderer}/package.json`, 'utf8'); + const rendererPackageName = JSON.parse(rendererPackageJson).name; + + return { + frameworkPackageName, + builderPackageName, + rendererPackageName, + }; } diff --git a/code/lib/cli-storybook/src/add.ts b/code/lib/cli-storybook/src/add.ts index 409c91c41fb6..df3ac84f140f 100644 --- a/code/lib/cli-storybook/src/add.ts +++ b/code/lib/cli-storybook/src/add.ts @@ -17,6 +17,7 @@ import { postinstallAddon } from './postinstallAddon'; export interface PostinstallOptions { packageManager: PackageManagerName; + configDir: string; } /** @@ -139,7 +140,7 @@ export async function add( await writeConfig(main); if (!skipPostinstall && isCoreAddon(addonName)) { - await postinstallAddon(addonName, { packageManager: packageManager.type }); + await postinstallAddon(addonName, { packageManager: packageManager.type, configDir }); } } function isValidVersion(version: string) { diff --git a/code/yarn.lock b/code/yarn.lock index 34cf0e23881e..16faae9c7535 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -6133,6 +6133,8 @@ __metadata: dependencies: "@storybook/csf": "npm:^0.1.11" "@vitest/browser": "npm:^2.0.0" + tinyrainbow: "npm:^1.2.0" + ts-dedent: "npm:^2.2.0" vitest: "npm:^2.0.0" peerDependencies: "@vitest/browser": ^2.0.0 From 3cee65eab7a60828c9845692288e495ba22a83cd Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Mon, 19 Aug 2024 16:03:59 +0200 Subject: [PATCH 02/27] Better texts --- code/addons/vitest/src/postinstall.ts | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/code/addons/vitest/src/postinstall.ts b/code/addons/vitest/src/postinstall.ts index a7a73eb3721e..a06d05ad3968 100644 --- a/code/addons/vitest/src/postinstall.ts +++ b/code/addons/vitest/src/postinstall.ts @@ -23,14 +23,19 @@ export default async function postInstall(options: PostinstallOptions) { const info = await getFrameworkInfo(options); - if (info.builderPackageName !== '@storybook/builder-vite') { - logger.info('Only @storybook/builder-vite is supported'); + if ( + info.frameworkPackageName !== '@storybook/nextjs' && + info.builderPackageName !== '@storybook/builder-vite' + ) { + logger.info('The vitest addon can only be used with a vite framework or nextjs.'); return; } const configFile = resolve('vitest.config.ts'); if (existsSync(configFile)) { - logger.info('You already have a vitest.config.ts file. Check our docs:'); + logger.info( + 'Check our docs how to configure vitest to test stories: https://storybook.js.org/docs/configure/vitest' + ); return; } @@ -47,7 +52,7 @@ export default async function postInstall(options: PostinstallOptions) { : null; if (!annotationsImport) { - logger.info('Your framework is not yet supported for the vitest addon.'); + logger.info('The vitest addon cannot yet be used with: ' + info.frameworkPackageName); return; } @@ -58,6 +63,7 @@ export default async function postInstall(options: PostinstallOptions) { logger.info(packages.join(', ')); await packageManager.addDependencies({ installAsDevDependencies: true }, packages); + logger.info(c.bold('Executing npx playwright install chromium --with-deps ...')); await packageManager.executeCommand({ command: 'npx', args: ['playwright', 'install', 'chromium', '--with-deps'], @@ -92,7 +98,6 @@ export default async function postInstall(options: PostinstallOptions) { name: 'chromium', provider: 'playwright', headless: true, - screenshotFailures: false, }, isolate: false, setupFiles: ['./.storybook/vitest.setup.ts'], From 1a4a5e73d2b5c601d0f617a624f7833a00f295b4 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Mon, 19 Aug 2024 16:11:50 +0200 Subject: [PATCH 03/27] Improve glob --- code/addons/vitest/src/postinstall.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/addons/vitest/src/postinstall.ts b/code/addons/vitest/src/postinstall.ts index a06d05ad3968..9032b34ad9fe 100644 --- a/code/addons/vitest/src/postinstall.ts +++ b/code/addons/vitest/src/postinstall.ts @@ -92,7 +92,7 @@ export default async function postInstall(options: PostinstallOptions) { storybookTest(),${vitestInfo.frameworkPluginCall ? '\n' + vitestInfo.frameworkPluginCall : ''} ], test: { - include: ['**/*.{stories}.?(m)[jt]s?(x)'], + include: ['**/*.stories.?(m)[jt]s?(x)'], browser: { enabled: true, name: 'chromium', From f4db6c0397d8aa1acc30a1c04a7e9f96d93ea450 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Mon, 19 Aug 2024 16:22:01 +0200 Subject: [PATCH 04/27] Add more log lines --- code/addons/vitest/src/postinstall.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/code/addons/vitest/src/postinstall.ts b/code/addons/vitest/src/postinstall.ts index 9032b34ad9fe..6441c1cf61e8 100644 --- a/code/addons/vitest/src/postinstall.ts +++ b/code/addons/vitest/src/postinstall.ts @@ -69,6 +69,7 @@ export default async function postInstall(options: PostinstallOptions) { args: ['playwright', 'install', 'chromium', '--with-deps'], }); + logger.info(c.bold('Writing .storybook/vitest.setup.ts file...')); await writeFile( resolve(options.configDir, 'vitest.setup.ts'), dedent` @@ -81,6 +82,8 @@ export default async function postInstall(options: PostinstallOptions) { beforeAll(project.beforeAll) ` ); + + logger.info(c.bold('Writing vitest.config.ts file...')); await writeFile( configFile, dedent` From c98d4c28f0e50bc9289414962e62c7add8fb8f1a Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Tue, 20 Aug 2024 15:50:30 +0200 Subject: [PATCH 05/27] Support adding workspace files if vitest.config.ts exists --- code/addons/vitest/package.json | 1 + code/addons/vitest/src/postinstall.ts | 60 ++++++++++++++++++++++----- code/yarn.lock | 1 + 3 files changed, 52 insertions(+), 10 deletions(-) diff --git a/code/addons/vitest/package.json b/code/addons/vitest/package.json index b504f0e08468..547987dac46e 100644 --- a/code/addons/vitest/package.json +++ b/code/addons/vitest/package.json @@ -75,6 +75,7 @@ }, "devDependencies": { "@vitest/browser": "^2.0.0", + "find-up": "^7.0.0", "tinyrainbow": "^1.2.0", "ts-dedent": "^2.2.0", "vitest": "^2.0.0" diff --git a/code/addons/vitest/src/postinstall.ts b/code/addons/vitest/src/postinstall.ts index 6441c1cf61e8..d734e4d3d128 100644 --- a/code/addons/vitest/src/postinstall.ts +++ b/code/addons/vitest/src/postinstall.ts @@ -1,7 +1,8 @@ import { existsSync } from 'node:fs'; import * as fs from 'node:fs/promises'; import { writeFile } from 'node:fs/promises'; -import { join, resolve } from 'node:path'; +import { dirname, join, resolve } from 'node:path'; +import * as path from 'node:path'; import { JsPackageManagerFactory, @@ -11,6 +12,7 @@ import { } from 'storybook/internal/common'; import { logger } from 'storybook/internal/node-logger'; +import { findUp } from 'find-up'; import c from 'tinyrainbow'; import dedent from 'ts-dedent'; @@ -31,14 +33,6 @@ export default async function postInstall(options: PostinstallOptions) { return; } - const configFile = resolve('vitest.config.ts'); - if (existsSync(configFile)) { - logger.info( - 'Check our docs how to configure vitest to test stories: https://storybook.js.org/docs/configure/vitest' - ); - return; - } - const annotationsImport = [ '@storybook/nextjs', '@storybook/experimental-nextjs-vite', @@ -83,9 +77,55 @@ export default async function postInstall(options: PostinstallOptions) { ` ); + const extensions = ['.ts', '.mts', '.cts', '.js', '.mjs', '.cjs']; + const configFiles = extensions.map((ext) => 'vitest.config' + ext); + + const rootConfig = await findUp(configFiles, { + cwd: process.cwd(), + }); + + if (rootConfig) { + const extname = rootConfig ? path.extname(rootConfig) : 'ts'; + const browserWorkspaceFile = resolve(dirname(rootConfig), `vitest.workspace${extname}`); + if (existsSync(browserWorkspaceFile)) { + logger.info( + 'A workspace file already exists. Check our docs how to configure vitest to test stories: https://storybook.js.org/docs/configure/vitest' + ); + return; + } + logger.info(c.bold('Writing vitest.workspace.ts file...')); + await writeFile( + browserWorkspaceFile, + dedent` + import { defineWorkspace } from 'vitest/config' + + export default defineWorkspace([ + 'vitest.config.ts', + { + extends: 'vitest.config${extname}', + plugins: [ + storybookTest(),${vitestInfo.frameworkPluginCall ? '\n' + vitestInfo.frameworkPluginCall : ''} + ], + test: { + include: ['**/*.stories.?(m)[jt]s?(x)'], + browser: { + enabled: true, + name: 'chromium', + provider: 'playwright', + headless: true, + }, + isolate: false, + setupFiles: ['./.storybook/vitest.setup.ts'], + }, + }, + ]) + ` + ); + return; + } logger.info(c.bold('Writing vitest.config.ts file...')); await writeFile( - configFile, + resolve('vitest.config.ts'), dedent` import { defineConfig } from "vitest/config"; import { storybookTest } from "@storybook/experimental-addon-vitest/plugin"; diff --git a/code/yarn.lock b/code/yarn.lock index 16faae9c7535..525d1d6c99d2 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -6133,6 +6133,7 @@ __metadata: dependencies: "@storybook/csf": "npm:^0.1.11" "@vitest/browser": "npm:^2.0.0" + find-up: "npm:^7.0.0" tinyrainbow: "npm:^1.2.0" ts-dedent: "npm:^2.2.0" vitest: "npm:^2.0.0" From 480f404a4f8623adcf28570cdc2cdbc4e336d9eb Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Tue, 20 Aug 2024 15:53:31 +0200 Subject: [PATCH 06/27] Update unit tests --- code/lib/cli-storybook/src/add.test.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/code/lib/cli-storybook/src/add.test.ts b/code/lib/cli-storybook/src/add.test.ts index 10e7b90b23ac..137e60a72008 100644 --- a/code/lib/cli-storybook/src/add.test.ts +++ b/code/lib/cli-storybook/src/add.test.ts @@ -144,6 +144,7 @@ describe('add (extra)', () => { expect(MockedPostInstall.postinstallAddon).toHaveBeenCalledWith('@storybook/addon-docs', { packageManager: 'npm', + configDir: '.storybook', }); }); }); From e9070eb663cd3f564c60f40598a64f6053cbff6b Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Tue, 20 Aug 2024 17:15:20 +0200 Subject: [PATCH 07/27] Update code/addons/vitest/src/postinstall.ts Co-authored-by: Yann Braga --- code/addons/vitest/src/postinstall.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/addons/vitest/src/postinstall.ts b/code/addons/vitest/src/postinstall.ts index d734e4d3d128..809d8e6a8e40 100644 --- a/code/addons/vitest/src/postinstall.ts +++ b/code/addons/vitest/src/postinstall.ts @@ -85,7 +85,7 @@ export default async function postInstall(options: PostinstallOptions) { }); if (rootConfig) { - const extname = rootConfig ? path.extname(rootConfig) : 'ts'; + const extname = rootConfig ? path.extname(rootConfig) : '.ts'; const browserWorkspaceFile = resolve(dirname(rootConfig), `vitest.workspace${extname}`); if (existsSync(browserWorkspaceFile)) { logger.info( From 675fdb8933defaa07c6f0491fe114c7e3a094059 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Tue, 20 Aug 2024 17:36:59 +0200 Subject: [PATCH 08/27] Get correct path --- code/addons/vitest/src/postinstall.ts | 5 ++--- code/lib/cli-storybook/src/add.ts | 16 ++++++++-------- 2 files changed, 10 insertions(+), 11 deletions(-) diff --git a/code/addons/vitest/src/postinstall.ts b/code/addons/vitest/src/postinstall.ts index 809d8e6a8e40..b4acaafe9f30 100644 --- a/code/addons/vitest/src/postinstall.ts +++ b/code/addons/vitest/src/postinstall.ts @@ -1,7 +1,7 @@ import { existsSync } from 'node:fs'; import * as fs from 'node:fs/promises'; import { writeFile } from 'node:fs/promises'; -import { dirname, join, resolve } from 'node:path'; +import { dirname, join, relative, resolve } from 'node:path'; import * as path from 'node:path'; import { @@ -100,9 +100,8 @@ export default async function postInstall(options: PostinstallOptions) { import { defineWorkspace } from 'vitest/config' export default defineWorkspace([ - 'vitest.config.ts', + '${relative(dirname(browserWorkspaceFile), rootConfig)}', { - extends: 'vitest.config${extname}', plugins: [ storybookTest(),${vitestInfo.frameworkPluginCall ? '\n' + vitestInfo.frameworkPluginCall : ''} ], diff --git a/code/lib/cli-storybook/src/add.ts b/code/lib/cli-storybook/src/add.ts index df3ac84f140f..82de4e6cad02 100644 --- a/code/lib/cli-storybook/src/add.ts +++ b/code/lib/cli-storybook/src/add.ts @@ -102,11 +102,11 @@ export async function add( return; } - if (checkInstalled(addonName, requireMain(configDir))) { - throw new Error(dedent` - Addon ${addonName} is already installed; we skipped adding it to your ${mainConfig}. - `); - } + // if (checkInstalled(addonName, requireMain(configDir))) { + // throw new Error(dedent` + // Addon ${addonName} is already installed; we skipped adding it to your ${mainConfig}. + // `); + // } const main = await readConfig(mainConfig); logger.log(`Verifying ${addonName}`); @@ -135,9 +135,9 @@ export async function add( logger.log(`Installing ${addonWithVersion}`); await packageManager.addDependencies({ installAsDevDependencies: true }, [addonWithVersion]); - logger.log(`Adding '${addon}' to main.js addons field.`); - main.appendValueToArray(['addons'], addonName); - await writeConfig(main); + // logger.log(`Adding '${addon}' to main.js addons field.`); + // main.appendValueToArray(['addons'], addonName); + // await writeConfig(main); if (!skipPostinstall && isCoreAddon(addonName)) { await postinstallAddon(addonName, { packageManager: packageManager.type, configDir }); From dbd4844aa4a89f64f9dfcea8a0866dbfdd63d31b Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Wed, 21 Aug 2024 14:14:53 +0200 Subject: [PATCH 09/27] Add comment about isolation --- code/addons/vitest/src/postinstall.ts | 18 +++++++++++++++--- 1 file changed, 15 insertions(+), 3 deletions(-) diff --git a/code/addons/vitest/src/postinstall.ts b/code/addons/vitest/src/postinstall.ts index b4acaafe9f30..9a7d98a90736 100644 --- a/code/addons/vitest/src/postinstall.ts +++ b/code/addons/vitest/src/postinstall.ts @@ -18,6 +18,8 @@ import dedent from 'ts-dedent'; import { type PostinstallOptions } from '../../../lib/cli-storybook/src/add'; +const extensions = ['.ts', '.mts', '.cts', '.js', '.mjs', '.cjs']; + export default async function postInstall(options: PostinstallOptions) { const packageManager = JsPackageManagerFactory.getPackageManager({ force: options.packageManager, @@ -53,6 +55,9 @@ export default async function postInstall(options: PostinstallOptions) { const vitestInfo = getVitestPluginInfo(info.frameworkPackageName); const packages = ['vitest@latest', '@vitest/browser@latest', 'playwright@latest']; + if (info.frameworkPackageName === '@storybook/nextjs') { + packages.push('vite-plugin-storybook-nextjs@latest'); + } logger.info(c.bold('Installing packages...')); logger.info(packages.join(', ')); await packageManager.addDependencies({ installAsDevDependencies: true }, packages); @@ -64,20 +69,24 @@ export default async function postInstall(options: PostinstallOptions) { }); logger.info(c.bold('Writing .storybook/vitest.setup.ts file...')); + + const previewExists = extensions + .map((ext) => path.resolve(path.join(options.configDir, `preview${ext}`))) + .some((config) => existsSync(config)); + await writeFile( resolve(options.configDir, 'vitest.setup.ts'), dedent` import { beforeAll } from 'vitest' import { setProjectAnnotations } from '${annotationsImport}' - import * as projectAnnotations from './preview' + ${previewExists ? `import * as projectAnnotations from './preview'` : ''} - const project = setProjectAnnotations(projectAnnotations) + const project = setProjectAnnotations(${previewExists ? 'projectAnnotations' : '[]'}) beforeAll(project.beforeAll) ` ); - const extensions = ['.ts', '.mts', '.cts', '.js', '.mjs', '.cjs']; const configFiles = extensions.map((ext) => 'vitest.config' + ext); const rootConfig = await findUp(configFiles, { @@ -113,6 +122,8 @@ export default async function postInstall(options: PostinstallOptions) { provider: 'playwright', headless: true, }, + // Disabling isolation is faster and should work for most storybooks. + // Consider removing this, if you have flaky tests. isolate: false, setupFiles: ['./.storybook/vitest.setup.ts'], }, @@ -181,6 +192,7 @@ async function getFrameworkInfo({ configDir, packageManager: pkgMgr }: Postinsta const frameworkPackageName = extractProperFrameworkName(frameworkName); + console.log(configDir); const presets = await loadAllPresets({ corePresets: [join(frameworkName, 'preset')], overridePresets: [ From 419b81c18d58edbbcd6f8a76bfff0b6b44cfdedf Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Wed, 21 Aug 2024 14:23:40 +0200 Subject: [PATCH 10/27] Rollback --- code/lib/cli-storybook/src/add.ts | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/code/lib/cli-storybook/src/add.ts b/code/lib/cli-storybook/src/add.ts index 82de4e6cad02..df3ac84f140f 100644 --- a/code/lib/cli-storybook/src/add.ts +++ b/code/lib/cli-storybook/src/add.ts @@ -102,11 +102,11 @@ export async function add( return; } - // if (checkInstalled(addonName, requireMain(configDir))) { - // throw new Error(dedent` - // Addon ${addonName} is already installed; we skipped adding it to your ${mainConfig}. - // `); - // } + if (checkInstalled(addonName, requireMain(configDir))) { + throw new Error(dedent` + Addon ${addonName} is already installed; we skipped adding it to your ${mainConfig}. + `); + } const main = await readConfig(mainConfig); logger.log(`Verifying ${addonName}`); @@ -135,9 +135,9 @@ export async function add( logger.log(`Installing ${addonWithVersion}`); await packageManager.addDependencies({ installAsDevDependencies: true }, [addonWithVersion]); - // logger.log(`Adding '${addon}' to main.js addons field.`); - // main.appendValueToArray(['addons'], addonName); - // await writeConfig(main); + logger.log(`Adding '${addon}' to main.js addons field.`); + main.appendValueToArray(['addons'], addonName); + await writeConfig(main); if (!skipPostinstall && isCoreAddon(addonName)) { await postinstallAddon(addonName, { packageManager: packageManager.type, configDir }); From 71ad82754d25049a32e9a61a5dc01da769cb210a Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Wed, 21 Aug 2024 14:26:51 +0200 Subject: [PATCH 11/27] Fix --- code/addons/vitest/src/postinstall.ts | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/code/addons/vitest/src/postinstall.ts b/code/addons/vitest/src/postinstall.ts index 9a7d98a90736..db9dae75ef2b 100644 --- a/code/addons/vitest/src/postinstall.ts +++ b/code/addons/vitest/src/postinstall.ts @@ -107,7 +107,8 @@ export default async function postInstall(options: PostinstallOptions) { browserWorkspaceFile, dedent` import { defineWorkspace } from 'vitest/config' - + import { storybookTest } from "@storybook/experimental-addon-vitest/plugin"; + ${vitestInfo.frameworkPluginImport ? vitestInfo.frameworkPluginImport + '\n' : ''} export default defineWorkspace([ '${relative(dirname(browserWorkspaceFile), rootConfig)}', { @@ -122,7 +123,7 @@ export default async function postInstall(options: PostinstallOptions) { provider: 'playwright', headless: true, }, - // Disabling isolation is faster and should work for most storybooks. + // Disabling isolation is faster and is similar to how tests are isolated in storybook itself. // Consider removing this, if you have flaky tests. isolate: false, setupFiles: ['./.storybook/vitest.setup.ts'], @@ -152,6 +153,8 @@ export default async function postInstall(options: PostinstallOptions) { provider: 'playwright', headless: true, }, + // Disabling isolation is faster and is similar to how tests are isolated in storybook itself. + // Consider removing this, if you have flaky tests. isolate: false, setupFiles: ['./.storybook/vitest.setup.ts'], }, From 718b8790f4aeb97956019ef13335c36667875874 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Wed, 21 Aug 2024 14:38:40 +0200 Subject: [PATCH 12/27] Improve messages --- code/addons/vitest/src/postinstall.ts | 48 +++++++++++++++++++-------- 1 file changed, 34 insertions(+), 14 deletions(-) diff --git a/code/addons/vitest/src/postinstall.ts b/code/addons/vitest/src/postinstall.ts index db9dae75ef2b..c6c4cffe7ed9 100644 --- a/code/addons/vitest/src/postinstall.ts +++ b/code/addons/vitest/src/postinstall.ts @@ -55,6 +55,14 @@ export default async function postInstall(options: PostinstallOptions) { const vitestInfo = getVitestPluginInfo(info.frameworkPackageName); const packages = ['vitest@latest', '@vitest/browser@latest', 'playwright@latest']; + + logger.info( + dedent` + We detected that you're using Next.js. + We will configure the vite-plugin-storybook-nextjs plugin to allow you to run tests in Vitest. + ` + ); + if (info.frameworkPackageName === '@storybook/nextjs') { packages.push('vite-plugin-storybook-nextjs@latest'); } @@ -98,14 +106,17 @@ export default async function postInstall(options: PostinstallOptions) { const browserWorkspaceFile = resolve(dirname(rootConfig), `vitest.workspace${extname}`); if (existsSync(browserWorkspaceFile)) { logger.info( - 'A workspace file already exists. Check our docs how to configure vitest to test stories: https://storybook.js.org/docs/configure/vitest' + dedent` + We detected that you have Vitest and workspaces configured, so we couldn't automatically set the plugin for you. + Please refer to the documentation on how to complete the set up: + https://storybook.js.org/docs/configure/vitest + ` ); - return; - } - logger.info(c.bold('Writing vitest.workspace.ts file...')); - await writeFile( - browserWorkspaceFile, - dedent` + } else { + logger.info(c.bold('Writing vitest.workspace.ts file...')); + await writeFile( + browserWorkspaceFile, + dedent` import { defineWorkspace } from 'vitest/config' import { storybookTest } from "@storybook/experimental-addon-vitest/plugin"; ${vitestInfo.frameworkPluginImport ? vitestInfo.frameworkPluginImport + '\n' : ''} @@ -131,13 +142,13 @@ export default async function postInstall(options: PostinstallOptions) { }, ]) ` - ); - return; - } - logger.info(c.bold('Writing vitest.config.ts file...')); - await writeFile( - resolve('vitest.config.ts'), - dedent` + ); + } + } else { + logger.info(c.bold('Writing vitest.config.ts file...')); + await writeFile( + resolve('vitest.config.ts'), + dedent` import { defineConfig } from "vitest/config"; import { storybookTest } from "@storybook/experimental-addon-vitest/plugin"; ${vitestInfo.frameworkPluginImport ? vitestInfo.frameworkPluginImport + '\n' : ''} @@ -160,6 +171,15 @@ export default async function postInstall(options: PostinstallOptions) { }, }) ` + ); + } + + logger.info( + dedent` + The Vitest addon is now configured and you're ready to run your tests! + Check the documentation for more information about its features and configurations at: + https://storybook.js.org/docs/configure/vitest + ` ); } From a26e267cd4efe295df4a6ed0872468cbc9f35995 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Wed, 21 Aug 2024 14:42:09 +0200 Subject: [PATCH 13/27] Validate framework --- code/addons/vitest/src/postinstall.ts | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/code/addons/vitest/src/postinstall.ts b/code/addons/vitest/src/postinstall.ts index c6c4cffe7ed9..21bb495e7a97 100644 --- a/code/addons/vitest/src/postinstall.ts +++ b/code/addons/vitest/src/postinstall.ts @@ -9,6 +9,7 @@ import { extractProperFrameworkName, loadAllPresets, loadMainConfig, + validateFrameworkName, } from 'storybook/internal/common'; import { logger } from 'storybook/internal/node-logger'; @@ -208,11 +209,7 @@ async function getFrameworkInfo({ configDir, packageManager: pkgMgr }: Postinsta const { framework } = config; const frameworkName = typeof framework === 'string' ? framework : framework?.name; - - if (!frameworkName) { - throw new Error('Could not detect your storybook framework.'); - } - + validateFrameworkName(frameworkName); const frameworkPackageName = extractProperFrameworkName(frameworkName); console.log(configDir); From ce006bf896dd879bd56125eacc8d6ec7f6e0d94d Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Thu, 22 Aug 2024 10:48:24 +0200 Subject: [PATCH 14/27] Update code/addons/vitest/src/postinstall.ts Co-authored-by: Kyle Gach --- code/addons/vitest/src/postinstall.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/addons/vitest/src/postinstall.ts b/code/addons/vitest/src/postinstall.ts index 21bb495e7a97..eb8c020803a2 100644 --- a/code/addons/vitest/src/postinstall.ts +++ b/code/addons/vitest/src/postinstall.ts @@ -32,7 +32,7 @@ export default async function postInstall(options: PostinstallOptions) { info.frameworkPackageName !== '@storybook/nextjs' && info.builderPackageName !== '@storybook/builder-vite' ) { - logger.info('The vitest addon can only be used with a vite framework or nextjs.'); + logger.info('The Vitest addon can only be used with a Vite-based Storybook framework or Next.js.'); return; } From 76734a0df3deaa126912b6c3d4ba893b02e70cd1 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Thu, 22 Aug 2024 10:48:30 +0200 Subject: [PATCH 15/27] Update code/addons/vitest/src/postinstall.ts Co-authored-by: Kyle Gach --- code/addons/vitest/src/postinstall.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/addons/vitest/src/postinstall.ts b/code/addons/vitest/src/postinstall.ts index eb8c020803a2..2093281be2cb 100644 --- a/code/addons/vitest/src/postinstall.ts +++ b/code/addons/vitest/src/postinstall.ts @@ -49,7 +49,7 @@ export default async function postInstall(options: PostinstallOptions) { : null; if (!annotationsImport) { - logger.info('The vitest addon cannot yet be used with: ' + info.frameworkPackageName); + logger.info('The Vitest addon cannot yet be used with: ' + info.frameworkPackageName); return; } From 78d544e6975cd2c3548988ab4f6fed15292a5b1a Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Thu, 22 Aug 2024 10:48:38 +0200 Subject: [PATCH 16/27] Update code/addons/vitest/src/postinstall.ts Co-authored-by: Kyle Gach --- code/addons/vitest/src/postinstall.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/code/addons/vitest/src/postinstall.ts b/code/addons/vitest/src/postinstall.ts index 2093281be2cb..60273d5bdaea 100644 --- a/code/addons/vitest/src/postinstall.ts +++ b/code/addons/vitest/src/postinstall.ts @@ -178,8 +178,8 @@ export default async function postInstall(options: PostinstallOptions) { logger.info( dedent` The Vitest addon is now configured and you're ready to run your tests! - Check the documentation for more information about its features and configurations at: - https://storybook.js.org/docs/configure/vitest + Check the documentation for more information about its features and options at: + https://storybook.js.org/docs/writing-tests/test-runner-with-vitest ` ); } From b45a9b4d7f643f361d4f9c52cbb27749834b2ae1 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Thu, 22 Aug 2024 10:50:31 +0200 Subject: [PATCH 17/27] Update code/addons/vitest/src/postinstall.ts Co-authored-by: Kyle Gach --- code/addons/vitest/src/postinstall.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/code/addons/vitest/src/postinstall.ts b/code/addons/vitest/src/postinstall.ts index 60273d5bdaea..685c1e028294 100644 --- a/code/addons/vitest/src/postinstall.ts +++ b/code/addons/vitest/src/postinstall.ts @@ -108,9 +108,9 @@ export default async function postInstall(options: PostinstallOptions) { if (existsSync(browserWorkspaceFile)) { logger.info( dedent` - We detected that you have Vitest and workspaces configured, so we couldn't automatically set the plugin for you. - Please refer to the documentation on how to complete the set up: - https://storybook.js.org/docs/configure/vitest + We detected that you are using Vitest with workspaces, so we do not have enough information to continue setting up the plugin automatically. + Please refer to the documentation to complete the setup manually: + https://storybook.js.org/docs/writing-tests/test-runner-with-vitest#manual ` ); } else { From d8a5c72a84363c83852fb039e647221d7a2bc431 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Thu, 22 Aug 2024 10:50:41 +0200 Subject: [PATCH 18/27] Update code/addons/vitest/src/postinstall.ts Co-authored-by: Kyle Gach --- code/addons/vitest/src/postinstall.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/addons/vitest/src/postinstall.ts b/code/addons/vitest/src/postinstall.ts index 685c1e028294..5410cc6cb417 100644 --- a/code/addons/vitest/src/postinstall.ts +++ b/code/addons/vitest/src/postinstall.ts @@ -228,7 +228,7 @@ async function getFrameworkInfo({ configDir, packageManager: pkgMgr }: Postinsta const { builder, renderer } = core; if (!builder || !renderer) { - throw new Error('Could not detect your storybook framework.'); + throw new Error('Could not detect your Storybook framework.'); } const builderPackageJson = await fs.readFile( From cc42862561e99f8cecbeaafcb30f1ff7e5f8e4d0 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Thu, 22 Aug 2024 10:53:09 +0200 Subject: [PATCH 19/27] Correct message --- code/addons/vitest/src/postinstall.ts | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/code/addons/vitest/src/postinstall.ts b/code/addons/vitest/src/postinstall.ts index 5410cc6cb417..8fb621830b1d 100644 --- a/code/addons/vitest/src/postinstall.ts +++ b/code/addons/vitest/src/postinstall.ts @@ -32,7 +32,9 @@ export default async function postInstall(options: PostinstallOptions) { info.frameworkPackageName !== '@storybook/nextjs' && info.builderPackageName !== '@storybook/builder-vite' ) { - logger.info('The Vitest addon can only be used with a Vite-based Storybook framework or Next.js.'); + logger.info( + 'The Vitest addon can only be used with a Vite-based Storybook framework or Next.js.' + ); return; } @@ -108,7 +110,7 @@ export default async function postInstall(options: PostinstallOptions) { if (existsSync(browserWorkspaceFile)) { logger.info( dedent` - We detected that you are using Vitest with workspaces, so we do not have enough information to continue setting up the plugin automatically. + We can not automatically setup the plugin when you use Vitest with workspaces. Please refer to the documentation to complete the setup manually: https://storybook.js.org/docs/writing-tests/test-runner-with-vitest#manual ` From b80775b6d5402e6b7336a9e38e9a49f7ae4ae396 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Thu, 22 Aug 2024 12:07:12 +0200 Subject: [PATCH 20/27] Change isolate message --- code/addons/vitest/src/postinstall.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/addons/vitest/src/postinstall.ts b/code/addons/vitest/src/postinstall.ts index 8fb621830b1d..6c34eaa19c1a 100644 --- a/code/addons/vitest/src/postinstall.ts +++ b/code/addons/vitest/src/postinstall.ts @@ -138,7 +138,7 @@ export default async function postInstall(options: PostinstallOptions) { headless: true, }, // Disabling isolation is faster and is similar to how tests are isolated in storybook itself. - // Consider removing this, if you have flaky tests. + // Consider removing this if you are seeing problems with your tests. isolate: false, setupFiles: ['./.storybook/vitest.setup.ts'], }, From 4d80b1f62cbf7ddcbc4bec59928a14c7d73f82c5 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Thu, 22 Aug 2024 12:08:34 +0200 Subject: [PATCH 21/27] Fix code style --- code/addons/vitest/src/postinstall.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/code/addons/vitest/src/postinstall.ts b/code/addons/vitest/src/postinstall.ts index 6c34eaa19c1a..9e930a82cc88 100644 --- a/code/addons/vitest/src/postinstall.ts +++ b/code/addons/vitest/src/postinstall.ts @@ -120,7 +120,7 @@ export default async function postInstall(options: PostinstallOptions) { await writeFile( browserWorkspaceFile, dedent` - import { defineWorkspace } from 'vitest/config' + import { defineWorkspace } from 'vitest/config'; import { storybookTest } from "@storybook/experimental-addon-vitest/plugin"; ${vitestInfo.frameworkPluginImport ? vitestInfo.frameworkPluginImport + '\n' : ''} export default defineWorkspace([ @@ -143,7 +143,7 @@ export default async function postInstall(options: PostinstallOptions) { setupFiles: ['./.storybook/vitest.setup.ts'], }, }, - ]) + ]); ` ); } @@ -172,7 +172,7 @@ export default async function postInstall(options: PostinstallOptions) { isolate: false, setupFiles: ['./.storybook/vitest.setup.ts'], }, - }) + }); ` ); } From 0a35a32cbd1b4213e076c38479329a4ae2724040 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Thu, 22 Aug 2024 15:57:22 +0200 Subject: [PATCH 22/27] Fix more codestyle --- code/addons/vitest/src/postinstall.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/addons/vitest/src/postinstall.ts b/code/addons/vitest/src/postinstall.ts index 9e930a82cc88..bc47cad6f961 100644 --- a/code/addons/vitest/src/postinstall.ts +++ b/code/addons/vitest/src/postinstall.ts @@ -121,7 +121,7 @@ export default async function postInstall(options: PostinstallOptions) { browserWorkspaceFile, dedent` import { defineWorkspace } from 'vitest/config'; - import { storybookTest } from "@storybook/experimental-addon-vitest/plugin"; + import { storybookTest } from '@storybook/experimental-addon-vitest/plugin'; ${vitestInfo.frameworkPluginImport ? vitestInfo.frameworkPluginImport + '\n' : ''} export default defineWorkspace([ '${relative(dirname(browserWorkspaceFile), rootConfig)}', From 61338bf3d33e1ac5a890ed5498d1c8ed49ea32e3 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Fri, 23 Aug 2024 14:57:57 +0200 Subject: [PATCH 23/27] Fix default export --- code/addons/vitest/src/postinstall.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/addons/vitest/src/postinstall.ts b/code/addons/vitest/src/postinstall.ts index bc47cad6f961..eb80b34c3bc4 100644 --- a/code/addons/vitest/src/postinstall.ts +++ b/code/addons/vitest/src/postinstall.ts @@ -13,7 +13,7 @@ import { } from 'storybook/internal/common'; import { logger } from 'storybook/internal/node-logger'; -import { findUp } from 'find-up'; +import findUp from 'find-up'; import c from 'tinyrainbow'; import dedent from 'ts-dedent'; From cd8f1f272fd743bc97dde8916f44acbb50af63c5 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Fri, 23 Aug 2024 15:14:34 +0200 Subject: [PATCH 24/27] Fix --- code/addons/vitest/src/postinstall.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/addons/vitest/src/postinstall.ts b/code/addons/vitest/src/postinstall.ts index eb80b34c3bc4..bc47cad6f961 100644 --- a/code/addons/vitest/src/postinstall.ts +++ b/code/addons/vitest/src/postinstall.ts @@ -13,7 +13,7 @@ import { } from 'storybook/internal/common'; import { logger } from 'storybook/internal/node-logger'; -import findUp from 'find-up'; +import { findUp } from 'find-up'; import c from 'tinyrainbow'; import dedent from 'ts-dedent'; From c17df9f8811767be638532bf8c69f5e31759e703 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Fri, 23 Aug 2024 15:54:03 +0200 Subject: [PATCH 25/27] Make renderer nullable --- code/addons/vitest/src/postinstall.ts | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/code/addons/vitest/src/postinstall.ts b/code/addons/vitest/src/postinstall.ts index bc47cad6f961..ca1af611e18e 100644 --- a/code/addons/vitest/src/postinstall.ts +++ b/code/addons/vitest/src/postinstall.ts @@ -229,8 +229,8 @@ async function getFrameworkInfo({ configDir, packageManager: pkgMgr }: Postinsta const { builder, renderer } = core; - if (!builder || !renderer) { - throw new Error('Could not detect your Storybook framework.'); + if (!builder) { + throw new Error('Could not detect your Storybook builder.'); } const builderPackageJson = await fs.readFile( @@ -239,8 +239,12 @@ async function getFrameworkInfo({ configDir, packageManager: pkgMgr }: Postinsta ); const builderPackageName = JSON.parse(builderPackageJson).name; - const rendererPackageJson = await fs.readFile(`${renderer}/package.json`, 'utf8'); - const rendererPackageName = JSON.parse(rendererPackageJson).name; + let rendererPackageName; + + if (renderer) { + const rendererPackageJson = await fs.readFile(`${renderer}/package.json`, 'utf8'); + rendererPackageName = JSON.parse(rendererPackageJson).name; + } return { frameworkPackageName, From 963014874935ac8d7eadbcbd4902b0f9e7503030 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Fri, 23 Aug 2024 15:56:22 +0200 Subject: [PATCH 26/27] Fix type issues --- code/addons/vitest/src/postinstall.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/code/addons/vitest/src/postinstall.ts b/code/addons/vitest/src/postinstall.ts index ca1af611e18e..53361975704b 100644 --- a/code/addons/vitest/src/postinstall.ts +++ b/code/addons/vitest/src/postinstall.ts @@ -44,7 +44,8 @@ export default async function postInstall(options: PostinstallOptions) { '@storybook/sveltekit', ].includes(info.frameworkPackageName) ? info.frameworkPackageName - : ['@storybook/react', '@storybook/svelte', '@storybook/vue3'].includes( + : info.rendererPackageName && + ['@storybook/react', '@storybook/svelte', '@storybook/vue3'].includes( info.rendererPackageName ) ? info.rendererPackageName @@ -239,8 +240,7 @@ async function getFrameworkInfo({ configDir, packageManager: pkgMgr }: Postinsta ); const builderPackageName = JSON.parse(builderPackageJson).name; - let rendererPackageName; - + let rendererPackageName: string | undefined; if (renderer) { const rendererPackageJson = await fs.readFile(`${renderer}/package.json`, 'utf8'); rendererPackageName = JSON.parse(rendererPackageJson).name; From dc9432a31fa9c14635f25887db6dd04978fc5ea4 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Fri, 23 Aug 2024 15:59:08 +0200 Subject: [PATCH 27/27] Throw errors in renderToCanvas in portable stories --- .../src/preview-api/modules/store/csf/portable-stories.ts | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/code/core/src/preview-api/modules/store/csf/portable-stories.ts b/code/core/src/preview-api/modules/store/csf/portable-stories.ts index f81ec95eca77..1525b6e3e6d8 100644 --- a/code/core/src/preview-api/modules/store/csf/portable-stories.ts +++ b/code/core/src/preview-api/modules/store/csf/portable-stories.ts @@ -165,8 +165,12 @@ export function composeStory {}, - showError: (error) => {}, - showException: (error) => {}, + showError: (error): void => { + throw new Error(`${error.title}\n${error.description}`); + }, + showException: (error): void => { + throw error; + }, forceRemount: true, storyContext: context, storyFn: () => story.unboundStoryFn(context),