fix: change test for component

Author: Procrustes5

packages-private/dts-test/defineComponent.test-d.tsx

@@ -3,29 +3,19 @@ import {
   type ComponentOptions,
   type ComponentPublicInstance,
   type PropType,
-  type Ref,
   type SetupContext,
   type Slots,
   type SlotsType,
   type VNode,
   createApp,
   defineComponent,
   h,
-  nextTick,
   reactive,
   ref,
-  render as vueRender,
   withKeys,
   withModifiers,
 } from 'vue'
 import { type IsAny, type IsUnion, describe, expectType } from './utils'
-import {
-  type TestElement,
-  type TestNode,
-  nodeOps,
-  serializeInner,
-  triggerEvent,
-} from '@vue/runtime-test'
 
 describe('with object props', () => {
   interface ExpectedProps {
@@ -2038,118 +2028,69 @@ expectString(instance.actionText)
 // @ts-expect-error
 expectString(instance.$props.actionText)
 
-// Helper function to safely cast TestNode to TestElement
-function getFirstElementChild(node: TestNode): TestElement {
-  if ('children' in node) {
-    return node.children[0] as TestElement
-  }
-  throw new Error('Expected an element with children')
-}
+describe('generic components in defineComponent', () => {
+  const GenericComp = defineComponent(
+    <T extends { name: string }>(props: { msg: string; list: T[] }) => {
+      return () => (
+        <div>
+          {props.msg}
+          {props.list.map(item => item.name).join(', ')}
+        </div>
+      )
+    },
+  )
 
-// Custom render function with correct typing for TestElement
-function render(vnode: any, root: TestElement) {
-  return vueRender(vnode, root as any)
-}
+  const GenericCompUser = defineComponent(() => {
+    const list = ref([{ name: 'Tom' }, { name: 'Jack' }])
 
-describe('defineComponent with generics', () => {
-  test('defineComponent with generic', async () => {
-    const Comp = defineComponent({
-      props: {
-        msg: String,
-        list: Array as PropType<{ name: string }[]>,
-      },
-      setup(props) {
-        const count = ref(0)
-        const increment = () => {
-          count.value++
-        }
+    return () => {
+      return (
+        <div>
+          <GenericComp<{ name: string }> msg="hello" list={list.value} />
+        </div>
+      )
+    }
+  })
 
-        return () =>
-          h('div', { onClick: increment }, [
-            h('h2', props.msg),
-            h('p', count.value),
-            ...(props.list || []).map((item: { name: string }) =>
-              h('p', item.name),
-            ),
-          ])
-      },
-    })
+  // Test correct usage
+  expectType<JSX.Element>(<GenericCompUser />)
 
-    const list: Ref<{ name: string }[]> = ref([
-      { name: 'Tom' },
-      { name: 'Jerry' },
-    ])
+  // Test GenericComp directly with correct props
+  expectType<JSX.Element>(
+    <GenericComp<{ name: string }> msg="hello" list={[{ name: 'Alice' }]} />,
+  )
 
-    const root = nodeOps.createElement('div')
-    render(h(Comp, { msg: 'Hello', list: list.value }), root)
-
-    expect(serializeInner(root)).toBe(
-      `<div><h2>Hello</h2><p>0</p><p>Tom</p><p>Jerry</p></div>`,
-    )
-
-    const firstChild = getFirstElementChild(root)
-    triggerEvent(firstChild, 'click')
-    await nextTick()
-    expect(serializeInner(root)).toBe(
-      `<div><h2>Hello</h2><p>1</p><p>Tom</p><p>Jerry</p></div>`,
-    )
-
-    list.value.push({ name: 'Spike' })
-    await nextTick()
-    expect(serializeInner(root)).toBe(
-      `<div><h2>Hello</h2><p>1</p><p>Tom</p><p>Jerry</p><p>Spike</p></div>`,
-    )
-  })
+  // Test with missing required prop
+  expectType<JSX.Element>(
+    // @ts-expect-error
+    <GenericComp<{ name: string }> list={[{ name: 'Bob' }]} />,
+  )
 
-  test('defineComponent with generic in render function', async () => {
-    const Comp = defineComponent({
-      props: {
-        msg: String,
-        list: Array as PropType<{ name: string }[]>,
-      },
-      setup(props) {
-        const count = ref(0)
-        const increment = () => {
-          count.value++
-        }
+  // Test with extended type
+  interface Person {
+    name: string
+    age: number
+  }
 
-        return () =>
-          h('div', { onClick: increment }, [
-            h('h2', props.msg),
-            h('p', count.value),
-            ...(props.list || []).map((item: { name: string }) =>
-              h('p', item.name),
-            ),
-          ])
-      },
-    })
+  const ExtendedGenericCompUser = defineComponent(() => {
+    const people = ref<Person[]>([
+      { name: 'Tom', age: 25 },
+      { name: 'Jack', age: 30 },
+    ])
 
-    const list = ref([{ name: 'Tom' }, { name: 'Jerry' }])
+    return () => {
+      return (
+        <div>
+          <GenericComp<Person> msg="people" list={people.value} />
+        </div>
+      )
+    }
+  })
 
-    const App = defineComponent({
-      setup() {
-        return () => h(Comp, { msg: 'Hello', list: list.value })
-      },
-    })
+  expectType<JSX.Element>(<ExtendedGenericCompUser />)
 
-    const root = nodeOps.createElement('div')
-    render(h(App), root)
-
-    expect(serializeInner(root)).toBe(
-      `<div><h2>Hello</h2><p>0</p><p>Tom</p><p>Jerry</p></div>`,
-    )
-
-    const firstChild = getFirstElementChild(root)
-    triggerEvent(firstChild, 'click')
-    await nextTick()
-    expect(serializeInner(root)).toBe(
-      `<div><h2>Hello</h2><p>1</p><p>Tom</p><p>Jerry</p></div>`,
-    )
-
-    list.value.push({ name: 'Spike' })
-    await nextTick()
-    expect(serializeInner(root)).toBe(
-      `<div><h2>Hello</h2><p>1</p><p>Tom</p><p>Jerry</p><p>Spike</p></div>`,
-    )
-  })
+  // Test GenericComp directly with extended type
+  expectType<JSX.Element>(
+    <GenericComp<Person> msg="people" list={[{ name: 'Alice', age: 28 }]} />,
+  )
 })

packages/runtime-core/src/apiDefineComponent.ts

@@ -184,9 +184,7 @@ export type DefineComponentWithGeneric<
     S
   > &
   PP & {
-    <T extends Record<string, any> = Generic>(
-      props: Props & { ref?: Ref<any> },
-    ): VNode
+    <T extends Generic>(props: Props & { ref?: Ref<any> } & T): VNode
   }
 
 // defineComponent is a utility that is primarily used for type inference