{paragraphs[0]}
+
{more && See the full stack trace in the browser console.
}{line},
];
+ return [
+ ,
+
,
+ ];
})}
);
diff --git a/code/addons/interactions/src/utils.ts b/code/addons/interactions/src/utils.ts
index 1b08eca12a24..d80d9f4cdbee 100644
--- a/code/addons/interactions/src/utils.ts
+++ b/code/addons/interactions/src/utils.ts
@@ -1,3 +1,7 @@
+import { type StorybookTheme, useTheme } from 'storybook/internal/theming';
+
+import Filter from 'ansi-to-html';
+
export function isTestAssertionError(error: unknown) {
return isChaiError(error) || isJestError(error);
}
@@ -21,3 +25,15 @@ export function isJestError(error: unknown) {
error.message.startsWith('expect(')
);
}
+
+export function createAnsiToHtmlFilter(theme: StorybookTheme) {
+ return new Filter({
+ fg: theme.color.defaultText,
+ bg: theme.background.content,
+ });
+}
+
+export function useAnsiToHtmlFilter() {
+ const theme = useTheme();
+ return createAnsiToHtmlFilter(theme);
+}
diff --git a/code/core/src/csf-tools/vitest-plugin/transformer.test.ts b/code/core/src/csf-tools/vitest-plugin/transformer.test.ts
index 72a1d05ab403..84d9ac273718 100644
--- a/code/core/src/csf-tools/vitest-plugin/transformer.test.ts
+++ b/code/core/src/csf-tools/vitest-plugin/transformer.test.ts
@@ -213,6 +213,55 @@ describe('transformer', () => {
`);
});
+ describe("use the story's name as test title", () => {
+ it('should support CSF v3 via name property', async () => {
+ const code = `
+ export default { component: Button }
+ export const Primary = { name: "custom name" };`;
+ const result = await transform({ code });
+
+ expect(result.code).toMatchInlineSnapshot(`
+ import { test as _test, expect as _expect } from "vitest";
+ import { testStory as _testStory } from "@storybook/experimental-addon-test/internal/test-utils";
+ const _meta = {
+ component: Button,
+ title: "automatic/calculated/title"
+ };
+ export default _meta;
+ export const Primary = {
+ name: "custom name"
+ };
+ const _isRunningFromThisFile = import.meta.url.includes(globalThis.__vitest_worker__.filepath ?? _expect.getState().testPath);
+ if (_isRunningFromThisFile) {
+ _test("custom name", _testStory("Primary", Primary, _meta, []));
+ }
+ `);
+ });
+
+ it('should support CSF v1/v2 via storyName property', async () => {
+ const code = `
+ export default { component: Button }
+ export const Story = () => {}
+ Story.storyName = 'custom name';`;
+ const result = await transform({ code: code });
+ expect(result.code).toMatchInlineSnapshot(`
+ import { test as _test, expect as _expect } from "vitest";
+ import { testStory as _testStory } from "@storybook/experimental-addon-test/internal/test-utils";
+ const _meta = {
+ component: Button,
+ title: "automatic/calculated/title"
+ };
+ export default _meta;
+ export const Story = () => {};
+ Story.storyName = 'custom name';
+ const _isRunningFromThisFile = import.meta.url.includes(globalThis.__vitest_worker__.filepath ?? _expect.getState().testPath);
+ if (_isRunningFromThisFile) {
+ _test("custom name", _testStory("Story", Story, _meta, []));
+ }
+ `);
+ });
+ });
+
it('should add test statement to const declared exported stories', async () => {
const code = `
export default {};
diff --git a/code/core/src/csf-tools/vitest-plugin/transformer.ts b/code/core/src/csf-tools/vitest-plugin/transformer.ts
index 51ea1169f6c3..778ea752f1d0 100644
--- a/code/core/src/csf-tools/vitest-plugin/transformer.ts
+++ b/code/core/src/csf-tools/vitest-plugin/transformer.ts
@@ -202,15 +202,17 @@ export async function vitestTransform({
const getTestStatementForStory = ({
exportName,
+ testTitle,
node,
}: {
exportName: string;
+ testTitle: string;
node: t.Node;
}): t.ExpressionStatement => {
// Create the _test expression directly using the exportName identifier
const testStoryCall = t.expressionStatement(
t.callExpression(vitestTestId, [
- t.stringLiteral(exportName),
+ t.stringLiteral(testTitle),
t.callExpression(testStoryId, [
t.stringLiteral(exportName),
t.identifier(exportName),
@@ -239,10 +241,9 @@ export async function vitestTransform({
return;
}
- return getTestStatementForStory({
- exportName,
- node,
- });
+ // use the story's name as the test title for vitest, and fallback to exportName
+ const testTitle = parsed._stories[exportName].name ?? exportName;
+ return getTestStatementForStory({ testTitle, exportName, node });
})
.filter((st) => !!st) as t.ExpressionStatement[];
diff --git a/code/package.json b/code/package.json
index b57cdde80abd..2d85ebfe44f5 100644
--- a/code/package.json
+++ b/code/package.json
@@ -295,5 +295,6 @@
"Dependency Upgrades"
]
]
- }
+ },
+ "deferredNextVersion": "8.3.4"
}
diff --git a/code/renderers/react/src/__test__/portable-stories.test.tsx b/code/renderers/react/src/__test__/portable-stories.test.tsx
index 94de89e093a5..85f33c9a714a 100644
--- a/code/renderers/react/src/__test__/portable-stories.test.tsx
+++ b/code/renderers/react/src/__test__/portable-stories.test.tsx
@@ -8,7 +8,8 @@ import React from 'react';
import { addons } from 'storybook/internal/preview-api';
-import type { Meta } from '@storybook/react';
+import type { ProjectAnnotations } from '@storybook/csf';
+import type { Meta, ReactRenderer } from '@storybook/react';
import * as addonActionsPreview from '@storybook/addon-actions/preview';
@@ -124,7 +125,7 @@ describe('projectAnnotations', () => {
const Story = composeStory(
ButtonStories.WithActionArgType,
ButtonStories.default,
- addonActionsPreview
+ addonActionsPreview as ProjectAnnotations