test: setup component render test

Author: haoqunjiang

package.json

@@ -15,61 +15,59 @@
     "test": "jest",
     "dev-example": "webpack-dev-server --config example/webpack.config.js --inline --hot",
     "build-example": "rm -rf example/dist && webpack --config example/webpack.config.js --env.prod",
-    "lint": "prettier --write --parser typescript \"{src,test}/**/*.ts\"",
+    "lint": "prettier --write --parser typescript \"{src,test}/**/*.{j,t}s\"",
     "prepublishOnly": "tsc"
   },
   "gitHooks": {
     "pre-commit": "lint-staged"
   },
   "lint-staged": {
     "*.js": [
-      "prettier --write",
-      "git add"
+      "prettier --write"
     ],
     "*.ts": [
-      "prettier --parser=typescript --write",
-      "git add"
+      "prettier --parser=typescript --write"
     ]
   },
   "dependencies": {
-    "@types/mini-css-extract-plugin": "^0.9.1",
-    "chalk": "^3.0.0",
+    "chalk": "^4.1.0",
     "hash-sum": "^2.0.0",
-    "loader-utils": "^1.2.3",
-    "merge-source-map": "^1.1.0",
-    "source-map": "^0.6.1"
+    "loader-utils": "^2.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.7.7",
     "@babel/preset-env": "^7.7.7",
-    "@types/estree": "^0.0.42",
+    "@types/estree": "^0.0.45",
     "@types/hash-sum": "^1.0.0",
-    "@types/jest": "^25.2.1",
-    "@types/loader-utils": "^1.1.3",
+    "@types/jest": "^26.0.13",
+    "@types/jsdom": "^16.2.4",
+    "@types/loader-utils": "^2.0.1",
+    "@types/mini-css-extract-plugin": "^0.9.1",
     "@types/webpack": "^4.41.0",
     "@types/webpack-merge": "^4.1.5",
     "@vue/compiler-sfc": "^3.0.0-rc.10",
     "babel-loader": "^8.0.6",
     "cache-loader": "^4.1.0",
-    "css-loader": "^3.3.2",
-    "file-loader": "^5.0.2",
+    "css-loader": "^4.3.0",
+    "file-loader": "^6.1.0",
     "jest": "^26.4.1",
-    "lint-staged": "^9.5.0",
+    "jsdom": "^16.4.0",
+    "lint-staged": "^10.3.0",
     "memfs": "^3.1.2",
-    "mini-css-extract-plugin": "^0.8.0",
-    "prettier": "^1.19.1",
-    "pug": "^2.0.4",
+    "mini-css-extract-plugin": "^0.11.2",
+    "prettier": "^2.1.1",
+    "pug": "^2.0.0",
     "pug-plain-loader": "^1.0.0",
     "stylus": "^0.54.7",
     "stylus-loader": "^3.0.2",
     "ts-jest": "^26.2.0",
     "typescript": "^4.0.2",
-    "url-loader": "^3.0.0",
+    "url-loader": "^4.1.0",
     "vue": "^3.0.0-rc.10",
     "webpack": "^4.41.2",
     "webpack-cli": "^3.3.10",
     "webpack-dev-server": "^3.9.0",
-    "webpack-merge": "^4.2.2",
+    "webpack-merge": "^5.1.4",
     "yorkie": "^2.0.0"
   },
   "jest": {

test/core.spec.ts

@@ -1,13 +1,18 @@
-import { bundle } from './utils'
+import { mockBundleAndRun } from './utils'
 
 test('basic', async () => {
-  await bundle({ entry: 'basic.vue' })
+  const { instance } = await mockBundleAndRun({ entry: 'basic.vue' })
+
+  // <h2 class="red">{{msg}}</h2>
+  expect(instance.$el.tagName).toBe('H2')
+  expect(instance.$el.className).toBe('red')
+  expect(instance.$el.textContent).toBe('Hello from Component A!')
 })
 
 test('script setup', async () => {
-  await bundle({ entry: 'ScriptSetup.vue' })
+  await mockBundleAndRun({ entry: 'ScriptSetup.vue' })
 })
 
 test('without script block', async () => {
-  await bundle({ entry: 'no-script.vue' })
+  await mockBundleAndRun({ entry: 'no-script.vue' })
 })

test/fixtures/entry.js

@@ -1,9 +1,15 @@
+import { createApp } from 'vue'
+
 import Component from '~target'
 import * as exports from '~target'
 
 if (typeof window !== 'undefined') {
   window.module = Component
   window.exports = exports
+
+  const app = createApp(Component)
+  const container = window.document.createElement('div')
+  window.instance = app.mount(container)
 }
 
 export default Component

test/utils.ts

@@ -2,83 +2,85 @@
 import path from 'path'
 import webpack from 'webpack'
 import merge from 'webpack-merge'
-// import MiniCssExtractPlugin from "mini-css-extract-plugin";
+import MiniCssExtractPlugin from 'mini-css-extract-plugin'
 import { fs as mfs } from 'memfs'
 
+import { JSDOM, VirtualConsole } from 'jsdom'
+
 import { VueLoaderPlugin, VueLoaderOptions } from '../dist/index'
 
 const baseConfig: webpack.Configuration = {
   mode: 'development',
   devtool: false,
   output: {
     path: '/',
-    filename: 'test.build.js'
-  },
-  resolve: {
-    alias: {
-      // this isn't technically needed, since the default `vue` entry for bundlers
-      // is a simple `export * from '@vue/runtime-dom`. However having this
-      // extra re-export somehow causes webpack to always invalidate the module
-      // on the first HMR update and causes the page to reload.
-      vue: '@vue/runtime-dom'
-    }
+    filename: 'test.build.js',
   },
   resolveLoader: {
     alias: {
-      'vue-loader': require.resolve('../dist')
-    }
+      'vue-loader': require.resolve('../dist'),
+    },
   },
   module: {
     rules: [
       {
         test: /\.vue$/,
-        use: 'vue-loader'
+        use: 'vue-loader',
       },
       {
         test: /\.png$/,
         use: {
           loader: 'url-loader',
-          options: { limit: 8192 }
-        }
+          options: { limit: 8192 },
+        },
       },
       {
         test: /\.css$/,
         use: [
-          // {
-          //   loader: MiniCssExtractPlugin.loader,
-          //   options: { hmr: true }
-          // },
-          'css-loader'
-        ]
-      }
-    ]
+          {
+            loader: MiniCssExtractPlugin.loader,
+            options: { hmr: true },
+          },
+          'css-loader',
+        ],
+      },
+    ],
   },
   plugins: [
-    new VueLoaderPlugin()
-    // new MiniCssExtractPlugin({
-    //   filename: '[name].css'
-    // })
-  ]
+    new VueLoaderPlugin(),
+    new webpack.DefinePlugin({
+      __VUE_OPTIONS_API__: true,
+      __VUE_PROD_DEVTOOLS__: false,
+    }),
+    new MiniCssExtractPlugin({
+      filename: '[name].css',
+    }),
+  ],
 }
 
 type BundleOptions = webpack.Configuration & {
   vue?: VueLoaderOptions
   modify?: (config: webpack.Configuration) => void
-  suppressJSDOMConsole?: boolean
 }
 
-export function bundle(options: BundleOptions, wontThrowError?: boolean) {
+export function bundle(
+  options: BundleOptions,
+  wontThrowError?: boolean
+): Promise<{
+  code: string
+  stats: webpack.Stats
+}> {
   let config: BundleOptions = merge({}, baseConfig, options)
 
   if (config.vue && config.module) {
     const vueOptions = options.vue
     delete config.vue
     const vueIndex = config.module.rules.findIndex(
-      r => r.test instanceof RegExp && r.test.test('.vue')
+      (r) => r.test instanceof RegExp && r.test.test('.vue')
     )
     const vueRule = config.module.rules[vueIndex]
     config.module.rules[vueIndex] = Object.assign({}, vueRule, {
-      options: vueOptions
+      options: vueOptions,
     })
   }
 
@@ -88,9 +90,9 @@ export function bundle(options: BundleOptions, wontThrowError?: boolean) {
       entry: require.resolve('./fixtures/entry'),
       resolve: {
         alias: {
-          '~target': path.resolve(__dirname, './fixtures', vueFile)
-        }
-      }
+          '~target': path.resolve(__dirname, './fixtures', vueFile),
+        },
+      },
     })
   }
 
@@ -102,7 +104,7 @@ export function bundle(options: BundleOptions, wontThrowError?: boolean) {
   const webpackCompiler = webpack(config)
   webpackCompiler.outputFileSystem = Object.assign(
     {
-      join: path.join.bind(path)
+      join: path.join.bind(path),
     },
     mfs
   )
@@ -113,7 +115,7 @@ export function bundle(options: BundleOptions, wontThrowError?: boolean) {
       if (!wontThrowError) {
         expect(err).toBeNull()
         if (errors && errors.length) {
-          errors.forEach(error => {
+          errors.forEach((error) => {
             console.error(error.message)
           })
         }
@@ -125,9 +127,47 @@ export function bundle(options: BundleOptions, wontThrowError?: boolean) {
       } else {
         resolve({
           code: mfs.readFileSync('/test.build.js').toString(),
-          stats
+          stats,
         })
       }
     })
   })
 }
+
+export async function mockBundleAndRun(
+  options: BundleOptions,
+  wontThrowError?: boolean
+) {
+  const { code, stats } = await bundle(options, wontThrowError)
+
+  let jsdomError
+  const dom = new JSDOM(
+    `<!DOCTYPE html><html><head></head><body></body></html>`,
+    {
+      runScripts: 'outside-only',
+      virtualConsole: new VirtualConsole(),
+    }
+  )
+  try {
+    dom.window.eval(code)
+  } catch (e) {
+    console.error(`JSDOM error:\n${e.stack}`)
+    jsdomError = e
+  }
+
+  const { window } = dom
+  const { module, exports, instance } = window
+
+  return {
+    window,
+
+    module,
+    exports,
+    instance,
+
+    code,
+    stats,
+
+    jsdomError,
+  }
+}

tsconfig.json

@@ -14,6 +14,7 @@
     "strictNullChecks": true,
     "noImplicitAny": true,
     "removeComments": false,
+    "skipLibCheck": true,
     "lib": [
       "es6",
       "es7"