Merge pull request #29250 from storybookjs/shilman/29244-vitest-renamed-exports

Vitest plugin: Fix renamed export stories

Author: yannbf

code/core/src/csf-tools/CsfFile.test.ts

@@ -81,6 +81,7 @@ describe('CsfFile', () => {
         stories:
           - id: foo-bar--a
             name: A
+            localName: A
             parameters:
               __id: foo-bar--a
             __stats:
@@ -94,6 +95,7 @@ describe('CsfFile', () => {
               moduleMock: false
           - id: foo-bar--b
             name: B
+            localName: B
             parameters:
               __id: foo-bar--b
             __stats:
@@ -790,6 +792,7 @@ describe('CsfFile', () => {
         stories:
           - id: foo-bar--a
             name: A
+            localName: default
             __stats:
               play: false
               render: false
@@ -801,6 +804,7 @@ describe('CsfFile', () => {
               moduleMock: false
           - id: foo-bar--b
             name: B
+            localName: B
             __stats:
               play: false
               render: false
@@ -878,6 +882,7 @@ describe('CsfFile', () => {
         stories:
           - id: foo-bar--a
             name: A
+            localName: A
             parameters:
               __id: foo-bar--a
             __stats:

code/core/src/csf-tools/CsfFile.ts

@@ -190,6 +190,7 @@ export interface StaticMeta
 
 export interface StaticStory extends Pick<StoryAnnotations, 'name' | 'parameters' | 'tags'> {
   id: string;
+  localName?: string;
   __stats: IndexInputStats;
 }
 
@@ -488,6 +489,7 @@ export class CsfFile {
             node.specifiers.forEach((specifier) => {
               if (t.isExportSpecifier(specifier) && t.isIdentifier(specifier.exported)) {
                 const { name: exportName } = specifier.exported;
+                const { name: localName } = specifier.local;
                 const decl = t.isProgram(parent)
                   ? findVarInitialization(specifier.local.name, parent)
                   : specifier.local;
@@ -515,6 +517,7 @@ export class CsfFile {
                   self._stories[exportName] = {
                     id: 'FIXME',
                     name: exportName,
+                    localName,
                     parameters: {},
                     __stats: {},
                   };

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

@@ -296,6 +296,40 @@ describe('transformer', () => {
       `);
     });
 
+    it('should add test statement to const declared renamed exported stories', async () => {
+      const code = `
+        export default {};
+        const Primary = {
+          args: {
+            label: 'Primary Button',
+          },
+        };
+
+        export { Primary as PrimaryStory };
+      `;
+
+      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 = {
+          title: "automatic/calculated/title"
+        };
+        export default _meta;
+        const Primary = {
+          args: {
+            label: 'Primary Button'
+          }
+        };
+        export { Primary as PrimaryStory };
+        const _isRunningFromThisFile = import.meta.url.includes(globalThis.__vitest_worker__.filepath ?? _expect.getState().testPath);
+        if (_isRunningFromThisFile) {
+          _test("PrimaryStory", _testStory("PrimaryStory", Primary, _meta, []));
+        }
+      `);
+    });
+
     it('should add tests for multiple stories', async () => {
       const code = `
         export default {};

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

@@ -201,10 +201,12 @@ export async function vitestTransform({
     ast.program.body.push(isRunningFromThisFileDeclaration);
 
     const getTestStatementForStory = ({
+      localName,
       exportName,
       testTitle,
       node,
     }: {
+      localName: string;
       exportName: string;
       testTitle: string;
       node: t.Node;
@@ -215,7 +217,7 @@ export async function vitestTransform({
           t.stringLiteral(testTitle),
           t.callExpression(testStoryId, [
             t.stringLiteral(exportName),
-            t.identifier(exportName),
+            t.identifier(localName),
             t.identifier(metaExportName),
             skipTagsId,
           ]),
@@ -241,9 +243,10 @@ export async function vitestTransform({
           return;
         }
 
+        const localName = parsed._stories[exportName].localName ?? exportName;
         // 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 });
+        return getTestStatementForStory({ testTitle, localName, exportName, node });
       })
       .filter((st) => !!st) as t.ExpressionStatement[];