Vue3: Add test for generic components with CSF factories

code/renderers/vue3/src/__tests__/GenericComponent.vue

@@ -0,0 +1,33 @@
+<template>
+  <ul class="generic-list">
+    <li
+      v-for="(item, index) in items"
+      :key="index"
+      :class="{ selected: selectedItem === item }"
+      @click="selectItem(item)"
+    >
+      {{ getLabel(item) }}
+    </li>
+  </ul>
+</template>
+
+<script lang="ts" setup generic="T">
+import { ref } from 'vue';
+
+const props = defineProps<{
+  items: T[];
+  getLabel: (item: T) => string;
+  defaultSelected?: T;
+}>();
+
+const emit = defineEmits<{
+  (e: 'select', item: T): void;
+}>();
+
+const selectedItem = ref<T | undefined>(props.defaultSelected);
+
+const selectItem = (item: T) => {
+  selectedItem.value = item;
+  emit('select', item);
+};
+</script>

code/renderers/vue3/src/csf-factories.test.ts

@@ -1,14 +1,15 @@
 // this file tests Typescript types that's why there are no assertions
 import { describe, expect, expectTypeOf, it, test } from 'vitest';
 
-import type { Canvas, ComponentAnnotations, StoryAnnotations } from 'storybook/internal/types';
+import type { Canvas } from 'storybook/internal/types';
 
 import { h } from 'vue';
 
 import BaseLayout from './__tests__/BaseLayout.vue';
 import Button from './__tests__/Button.vue';
 import Decorator2TsVue from './__tests__/Decorator2.vue';
 import DecoratorTsVue from './__tests__/Decorator.vue';
+import GenericComponent from './__tests__/GenericComponent.vue';
 import { __definePreview } from './preview';
 import type { ComponentPropsAndSlots, Decorator, Meta, StoryObj } from './public-types';
 
@@ -197,3 +198,34 @@ it('allow types to be inferred from render as well', () => {
     args: { disabled: true },
   });
 });
+
+describe('Generic components (issue #24238)', () => {
+  // Generic Vue components with TypeScript generics work with CSF factories
+  // by passing the type parameter directly: GenericComponent<ConcreteType>
+  // See: https://github.com/storybookjs/storybook/issues/24238
+
+  it('✅ Generic components work by passing type parameter directly', () => {
+    const meta = preview.meta({
+      component: GenericComponent<{ id: number; name: string }>,
+    });
+
+    const Story = meta.story({
+      args: {
+        items: [
+          {
+            id: 1,
+            name: 'John Doe',
+          },
+        ],
+        getLabel: (item) => {
+          // item is correctly typed as { id: number; name: string }
+          expectTypeOf(item).toMatchObjectType<{ id: number; name: string }>();
+          return item.name;
+        },
+      },
+    });
+
+    // Verify the story has the correct args
+    expect(Story.input.args?.items).toHaveLength(1);
+  });
+});