chore: refactor with parsedStory

code/core/src/csf-tools/vitest-plugin/transformer.test.ts

@@ -213,40 +213,76 @@ describe('transformer', () => {
       `);
     });
 
-    it("should use the story's explicitly settled name if it's present", async () => {
-      const code = `
-        export default {
-          component: Button,
-        }
-        export const Primary = {
-          name: "basic Primary Button scenario",
-          args: {
-            label: 'Primary Button',
-          },
-        };
-      `;
+    describe("use the story's name as test title", () => {
+      it('should support csf v3 with object config', 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, []));
+          }
+        `);
+      });
 
-      const result = await transform({ code });
+      it('should support csf v3 with function config', async () => {
+        const code = `
+        export default { component: Button };
+        export const Story = () => { 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 Story = () => {
+            name: 'custom name';
+          };
+          const _isRunningFromThisFile = import.meta.url.includes(globalThis.__vitest_worker__.filepath ?? _expect.getState().testPath);
+          if (_isRunningFromThisFile) {
+            _test("Story", _testStory("Story", Story, _meta, []));
+          }
+        `);
+      });
 
-      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: "basic Primary Button scenario",
-          args: {
-            label: 'Primary Button'
+      it('should support csf v1/v2', 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, []));
           }
-        };
-        const _isRunningFromThisFile = import.meta.url.includes(globalThis.__vitest_worker__.filepath ?? _expect.getState().testPath);
-        if (_isRunningFromThisFile) {
-          _test("basic Primary Button scenario", _testStory("Primary", Primary, _meta, []));
-        }
-      `);
+        `);
+      });
     });
 
     it('should add test statement to const declared exported stories', async () => {

code/core/src/csf-tools/vitest-plugin/transformer.ts

@@ -202,38 +202,17 @@ export async function vitestTransform({
 
     const getTestStatementForStory = ({
       exportName,
+      testTitle,
       node,
     }: {
       exportName: string;
+      testTitle: string;
       node: t.Node;
     }): t.ExpressionStatement => {
-      // Get test name from the story's name property, and fallback to exportName
-      let testName = exportName;
-      if (
-        node.type === 'ExportNamedDeclaration' &&
-        node.declaration?.type === 'VariableDeclaration'
-      ) {
-        const storyDeclarator = node.declaration.declarations[0];
-        if (storyDeclarator.init?.type === 'ObjectExpression') {
-          // Find the "name" property and set its value to testName
-          for (const prop of storyDeclarator.init.properties) {
-            if (
-              prop.type === 'ObjectProperty' &&
-              prop.key.type === 'Identifier' &&
-              prop.value.type === 'StringLiteral' &&
-              prop.key.name === 'name'
-            ) {
-              testName = prop.value.value;
-              break;
-            }
-          }
-        }
-      }
-
       // Create the _test expression directly using the exportName identifier
       const testStoryCall = t.expressionStatement(
         t.callExpression(vitestTestId, [
-          t.stringLiteral(testName),
+          t.stringLiteral(testTitle),
           t.callExpression(testStoryId, [
             t.stringLiteral(exportName),
             t.identifier(exportName),
@@ -262,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[];
 

docs/writing-tests/vitest-plugin.mdx

@@ -381,7 +381,12 @@ We recommend using Chromium, because it is most likely to best match the experie
 
 ### How do I customized the test description
 
-We are using the exportName of a story definition by default, but you can provide a `name` property for the story to customize the test description. This is useful when you want have places, brackets or other special characters in the test description.
+By default, the export name of a story is mapped to the test name. You can provide a `name` property for the story to customize the test description, allowing you to write more descriptive names. This is useful when you want use spaces, brackets or other special characters in the test description.
+```js
+export const Story = {
+  name: 'custom, descriptive name'
+};
+```
 
 ## API