test: add test for 3.3 type imports

vuejs · Apr 19, 2023 · e48bbfa · e48bbfa
1 parent 56e8db7
commit e48bbfa
Show file tree

Hide file tree

Showing 8 changed files with 61 additions and 4 deletions.
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(),