fix: return the correct name when stubbing a script setup component (…

…#1783)

package.json

@@ -52,6 +52,7 @@
     "rollup-plugin-typescript2": "0.34.0",
     "tslib": "2.4.0",
     "typescript": "4.8.3",
+    "unplugin-vue-components": "0.22.7",
     "vite": "3.1.3",
     "vitepress": "0.22.4",
     "vitest": "0.22.1",

src/utils/componentName.ts

@@ -38,7 +38,12 @@ export const getComponentName = (
   type: VNodeTypes
 ): string => {
   if (isObjectComponent(type)) {
-    return getComponentNameInSetup(instance, type) || type.name || ''
+    return (
+      // If the component we stub is a script setup component and is automatically
+      // imported by unplugin-vue-components we can only get its name through
+      // the `__name` property.
+      getComponentNameInSetup(instance, type) || type.name || type.__name || ''
+    )
   }
 
   if (isLegacyExtendedComponent(type)) {

tests/components/AutoImportScriptSetup.vue

@@ -0,0 +1,3 @@
+<template>
+  <ScriptSetup/>
+</template>

tests/mountingOptions/global.stubs.spec.ts

@@ -6,6 +6,7 @@ import Hello from '../components/Hello.vue'
 import ComponentWithoutName from '../components/ComponentWithoutName.vue'
 import ComponentWithSlots from '../components/ComponentWithSlots.vue'
 import ScriptSetupWithChildren from '../components/ScriptSetupWithChildren.vue'
+import AutoImportScriptSetup from '../components/AutoImportScriptSetup.vue'
 
 describe('mounting options: stubs', () => {
   let configStubsSave = config.global.stubs
@@ -393,6 +394,17 @@ describe('mounting options: stubs', () => {
     )
   })
 
+  it('stubs a script setup component imported by unplugin-vue-components', () => {
+    const wrapper = mount(AutoImportScriptSetup, {
+      global: {
+        stubs: {
+          ScriptSetup: true
+        }
+      }
+    })
+    expect(wrapper.html()).toBe(`<script-setup-stub></script-setup-stub>`)
+  })
+
   describe('transition', () => {
     it('stubs transition by default', () => {
       const CompStubbedByDefault = {

vitest.config.ts

@@ -2,9 +2,21 @@ import path from 'path'
 import { defineConfig } from 'vitest/config'
 import vue from '@vitejs/plugin-vue'
 import jsx from '@vitejs/plugin-vue-jsx'
+import Components from 'unplugin-vue-components/vite'
 
 export default defineConfig({
-  plugins: [vue(), jsx()],
+  plugins: [
+    vue(),
+    jsx(),
+    // We need this plugin to test for stubbing a script setup component
+    // imported by it.
+    // https://github.com/antfu/unplugin-vue-components/issues/429
+    Components({
+      dts: false,
+      include: /AutoImportScriptSetup\.vue$/,
+      dirs: ['tests/components']
+    })
+  ],
   define: {
     __USE_BUILD__: process.env.NODE_ENV !== 'test-build',
     __BROWSER__: true,