test: add test for 3.3 type imports

yyx990803 · yyx990803 · commit e48bbfab3d03 · 2023-04-19T10:05:44.000+08:00
diff --git a/example/webpack.config.js b/example/webpack.config.js
@@ -3,8 +3,6 @@ const webpack = require('webpack')
 const VueLoaderPlugin = require('../dist/plugin').default
 const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 
-console.log(webpack.version)
-
 module.exports = (env = {}) => {
   const isProd = env.prod
   const isSSR = env.ssr
@@ -83,7 +81,9 @@ module.exports = (env = {}) => {
             test: /\.ts$/,
             use: [
               {
-                loader: 'ts-loader',
+                loader: process.env.WEBPACK4
+                  ? require.resolve('ts-loader')
+                  : require.resolve('ts-loader-v9'),
                 options: {
                   transpileOnly: true,
                   appendTsSuffixTo: [/\.vue$/],
diff --git a/test/fixtures/entry.js b/test/fixtures/entry.js
@@ -9,7 +9,9 @@ if (typeof window !== 'undefined') {
 
   const app = createApp(Component)
   const container = window.document.createElement('div')
+  container.id = 'app'
   window.instance = app.mount(container)
+  window.document.body.appendChild(container)
 }
 
 export default Component
diff --git a/test/fixtures/imported-types-aliased.ts b/test/fixtures/imported-types-aliased.ts
@@ -0,0 +1,3 @@
+export interface Props {
+  id?: number
+}
diff --git a/test/fixtures/imported-types.ts b/test/fixtures/imported-types.ts
@@ -0,0 +1,3 @@
+export interface Props {
+  msg: string
+}
diff --git a/test/fixtures/imported-types.vue b/test/fixtures/imported-types.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import type { Props } from './imported-types'
+import type { Props as P } from 'foo'
+
+const props = defineProps<Props & P>()
+</script>
+
+<template>
+  {{ Object.keys(props) }}
+</template>
diff --git a/test/fixtures/tsconfig.json b/test/fixtures/tsconfig.json
@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "paths": {
+      "foo": ["./imported-types-aliased.ts"]
+    }
+  },
+  "include": ["."]
+}
diff --git a/test/script.spec.ts b/test/script.spec.ts
@@ -19,3 +19,21 @@ test('should handle custom resource query', async () => {
 
   expect(exports.default.data().msg).toBe('Hello from Component A!')
 })
+
+test('should support importing external types', async () => {
+  const { exports, window } = await mockBundleAndRun({
+    entry: 'imported-types.vue',
+  })
+  expect(exports.default).toMatchObject({
+    props: {
+      msg: {
+        type: window.String,
+        required: true,
+      },
+      id: {
+        type: window.Number,
+        required: false,
+      },
+    },
+  })
+})
diff --git a/test/utils.ts b/test/utils.ts
@@ -17,6 +17,9 @@ const baseConfig: webpack.Configuration = {
     filename: 'test.build.js',
     publicPath: '',
   },
+  resolve: {
+    extensions: ['.js', '.ts'],
+  },
   resolveLoader: {
     alias: {
       'vue-loader': require.resolve('../dist'),
@@ -28,6 +31,16 @@ const baseConfig: webpack.Configuration = {
         test: /\.vue$/,
         loader: 'vue-loader',
       },
+      {
+        test: /\.ts$/,
+        loader: process.env.WEBPACK4
+          ? require.resolve('ts-loader')
+          : require.resolve('ts-loader-v9'),
+        options: {
+          transpileOnly: true,
+          appendTsSuffixTo: [/\.vue$/],
+        },
+      },
       {
         test: /\.css$/,
         use: ['style-loader', 'css-loader'],
@@ -129,7 +142,7 @@ export async function mockBundleAndRun(
   const { code, stats } = await bundle(options, wontThrowError)
 
   const dom = new JSDOM(
-    `<!DOCTYPE html><html><head></head><body><div id="#app"></div></body></html>`,
+    `<!DOCTYPE html><html><head></head><body></body></html>`,
     {
       runScripts: 'outside-only',
       virtualConsole: new VirtualConsole(),

Original file line number	Diff line number	Diff line change
`@@ -9,7 +9,9 @@ if (typeof window !== 'undefined') {`
`9`	`9`
`10`	`10`	`const app = createApp(Component)`
`11`	`11`	`const container = window.document.createElement('div')`
	`12`	`+ container.id = 'app'`
`12`	`13`	`window.instance = app.mount(container)`
	`14`	`+ window.document.body.appendChild(container)`
`13`	`15`	`}`
`14`	`16`
`15`	`17`	`export default Component`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+export interface Props {`
	`2`	`+ id?: number`
	`3`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+export interface Props {`
	`2`	`+ msg: string`
	`3`	`+}`