test: add a test case for custom component id

Author: Jinjiang

playground/vue-custom-id/Main.vue

@@ -0,0 +1,7 @@
+<script setup>
+import Foo from './components/Foo.vue'
+</script>
+
+<template>
+  <Foo />
+</template>

playground/vue-custom-id/__tests__/vue-custom-id.spec.ts

@@ -0,0 +1,8 @@
+import { expect, test } from 'vitest'
+import { page } from '~utils'
+
+test('should render', async () => {
+  expect(await page.innerHTML('div')).toMatch(
+    '<h1 data-v-components-foo="">Foo</h1>',
+  )
+})

playground/vue-custom-id/components/Foo.vue

@@ -0,0 +1,9 @@
+<template>
+  <h1>Foo</h1>
+</template>
+
+<style scoped>
+h1 {
+  color: red;
+}
+</style>

playground/vue-custom-id/index.html

@@ -0,0 +1,7 @@
+<div id="app"></div>
+<script type="module">
+  import { createApp, defineCustomElement } from 'vue'
+  import Main from './Main.vue'
+
+  createApp(Main).mount('#app')
+</script>

playground/vue-custom-id/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@vitejs/test-vue-custom-id",
+  "private": true,
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "debug": "node --inspect-brk vite",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "vue": "catalog:"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "workspace:*"
+  }
+}

playground/vue-custom-id/vite.config.ts

@@ -0,0 +1,21 @@
+import { defineConfig } from 'vite'
+import vuePlugin from '@vitejs/plugin-vue'
+
+export default defineConfig({
+  plugins: [
+    vuePlugin({
+      features: {
+        componentIdGenerator: (filename) => {
+          return filename
+            .replace(/\.\w+$/, '')
+            .replace(/[^a-z0-9]/gi, '-')
+            .toLowerCase()
+        },
+      },
+    }),
+  ],
+  build: {
+    // to make tests faster
+    minify: false,
+  },
+})