Merge pull request #32041 from storybookjs/vitest-transform-plain-stories-tsx

Addon Vitest: Fix support for plain `stories.tsx` files

Author: ghengeveld

code/.storybook/main.ts

@@ -93,6 +93,11 @@ const config = defineMain({
       directory: '../addons/vitest/template/stories',
       titlePrefix: 'addons/vitest',
     },
+    {
+      directory: '../addons/vitest/src',
+      titlePrefix: 'addons/vitest',
+      files: 'stories.tsx',
+    },
   ],
   addons: [
     '@storybook/addon-themes',

code/addons/vitest/src/stories.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { expect } from 'storybook/test';
+
+const meta = {
+  title: 'StoriesTsx',
+  render: () => <div>This is a story coming from a /stories.tsx file detected via custom glob</div>,
+} satisfies Meta;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  play: async () => {
+    expect(true).toBe(true);
+  },
+};

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

@@ -48,17 +48,6 @@ const transform = async ({
 };
 
 describe('transformer', () => {
-  describe('no-op', () => {
-    it('should return original code if the file is not a story file', async () => {
-      const code = `console.log('Not a story file');`;
-      const fileName = 'src/components/Button.js';
-
-      const result = await transform({ code, fileName });
-
-      expect(result.code).toMatchInlineSnapshot(`console.log('Not a story file');`);
-    });
-  });
-
   describe('CSF v1/v2/v3', () => {
     describe('default exports (meta)', () => {
       it('should add title to inline default export if not present', async () => {
@@ -124,7 +113,7 @@ describe('transformer', () => {
             component: Button,
           };
           export default meta;
-  
+
           export const Story = {};
         `;
 
@@ -153,9 +142,9 @@ describe('transformer', () => {
           const meta = {
             title: 'Button',
             component: Button,
-          };  
+          };
           export default meta;
-  
+
           export const Story = {};
         `;
 
@@ -272,7 +261,7 @@ describe('transformer', () => {
               label: 'Primary Button',
             },
           };
-  
+
           export { Primary };
         `;
 
@@ -306,7 +295,7 @@ describe('transformer', () => {
               label: 'Primary Button',
             },
           };
-  
+
           export { Primary as PrimaryStory };
         `;
 
@@ -340,9 +329,9 @@ describe('transformer', () => {
               label: 'Primary Button',
             },
           };
-  
+
           export const Secondary = {}
-  
+
           export { Primary };
         `;
 
@@ -430,7 +419,7 @@ describe('transformer', () => {
         const code = `
           export default {};
           export const Included = { tags: ['include-me'] };
-  
+
           export const NotIncluded = {}
         `;
 
@@ -461,7 +450,7 @@ describe('transformer', () => {
         const code = `
           export default {};
           export const Included = {};
-  
+
           export const NotIncluded = { tags: ['exclude-me'] }
         `;
 
@@ -636,7 +625,7 @@ describe('transformer', () => {
         const code = `
         import { config } from '#.storybook/preview';
         const meta = config.meta({ component: Button });
-        const Primary = meta.story({ 
+        const Primary = meta.story({
           args: {
             label: 'Primary Button',
           }
@@ -672,7 +661,7 @@ describe('transformer', () => {
         const code = `
         import { config } from '#.storybook/preview';
         const meta = config.meta({ component: Button });
-        const Primary = meta.story({ 
+        const Primary = meta.story({
           args: {
             label: 'Primary Button',
           }

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

@@ -46,11 +46,6 @@ export async function vitestTransform({
   stories: StoriesEntry[];
   previewLevelTags: Tag[];
 }): Promise<ReturnType<typeof formatCsf>> {
-  const isStoryFile = /\.stor(y|ies)\./.test(fileName);
-  if (!isStoryFile) {
-    return code;
-  }
-
   const parsed = loadCsf(code, {
     fileName,
     transformInlineMeta: true,