使用 Mocha + webpack 测试单文件组件在 vuejs 上的单元测试中加载测试时出现运行时异常异常

Question

我有现有的项目用单个组件进行单元测试但是当我编译时会出错。

WEBPACK  Compiled successfully in 17093ms

MOCHA  Testing...

RUNTIME EXCEPTION  Exception occurred while loading your tests
SyntaxError: Unexpected token .

我的package.json文件是

"devDependencies": {
"@vue/test-utils": "^1.0.0-beta.29",
"autoprefixer": "^7.1.2",
"babel-core": "^6.22.1",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-loader": "^7.1.1",
"babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-plugin-transform-vue-jsx": "^3.5.0",
"babel-preset-env": "^1.3.2",
"babel-preset-stage-2": "^6.22.0",
"copy-webpack-plugin": "^4.0.1",
"css-loader": "^0.28.11",
"expect": "^24.1.0",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^1.1.4",
"friendly-errors-webpack-plugin": "^1.6.1",
"html-webpack-plugin": "^2.30.1",
"jsdom": "^13.2.0",
"jsdom-global": "^3.0.2",
"mocha": "^6.0.1",
"mocha-webpack": "^1.1.0",
"node-notifier": "^5.1.2",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"portfinder": "^1.0.13",
"postcss-import": "^11.0.0",
"postcss-loader": "^2.0.8",
"postcss-url": "^7.2.1",
"rimraf": "^2.6.0",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
"ora": "^1.2.0",
"uglifyjs-webpack-plugin": "^1.1.1",
"url-loader": "^1.1.2",
"vue-loader": "^13.7.3",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.5.21",
"webpack": "^3.6.0",
"webpack-bundle-analyzer": "^2.9.0",
"webpack-dev-server": "^2.9.1",
"webpack-merge": "^4.1.0",
"webpack-node-externals": "^1.7.2"
},

Login.spec.js

import { shallowMount } from '@vue/test-utils'
import Login from '../src/components/global/login/Login.vue'

describe('Login.vue', () => {
 it('Log in ', () => {
   const wrapper = shallowMount(Login)

 })
})

我将 npm 6.4.1 和 vue 2.6.6 与 mocha-webpack 一起用于运行我的测试。

webpack.config.js :

var path = require('path')
var webpack = require('webpack')
const nodeExternals = require('webpack-node-externals')
module.exports = {
externals: [nodeExternals()],
   entry: './src/main.js',
   output: {
      path: path.resolve(__dirname, './dist'),
      publicPath: '/dist/',
      filename: 'build.js'
    },
   module: {
      rules: [
      {
         test: /\.css$/,
         use: [
            'vue-style-loader',
            'css-loader'
         ],
       }, {
         test: /\.vue$/,
         loader: 'vue-loader',
         options: {
           loaders: {
               sourceMap: true
          }
          // other vue-loader options go here
        }
  },
  {
    test: /\.js$/,
    loader: 'babel-loader',
    exclude: /node_modules/
  },
  {
    test: /\.(png|jpg|gif|svg)$/,
    loader: 'file-loader',
    options: {
      name: '[name].[ext]?[hash]'
    }
  },
   { test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader? 
   limit=100000' }
     ]
   },
  resolve: {
     alias: {
     'vue$': 'vue/dist/vue.esm.js'
   },
    extensions: ['*', '.js', '.vue', '.json']
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true,
    overlay: true
  },
  performance: {
    hints: false
  },
 devtool: '#eval-source-map'
 }

 if (process.env.NODE_ENV === 'production') {
    module.exports.devtool = '#source-map'
      // http://vue-loader.vuejs.org/en/workflow/production.html
     module.exports.plugins = (module.exports.plugins || []).concat([
     new webpack.DefinePlugin({
         'process.env': {
         NODE_ENV: '"production"'
      }
   }),
   new webpack.optimize.UglifyJsPlugin({
     sourceMap: true,
     compress: {
       warnings: false
     }
   }),
    new webpack.LoaderOptionsPlugin({
     minimize: true
   })
 ])
 }

知道如何解决这个问题吗？（我按照网上的example，和npm mocha-webpack 页面，但无法解决）。

Answer 1

正在修改 webpack.config 文件

喜欢

 var path = require('path')
 var webpack = require('webpack')
 module.exports = {
   entry: ['./src/main.js'],
   output: {
   path: path.resolve(__dirname, './dist'),
   publicPath: '/dist/',
   filename: 'build.js'
 },
 module: {
   rules: [
   {
      test: /\.css$/,
      use: [
      'vue-style-loader',
      'css-loader'
     ],
   },
   {
     test: /\.scss$/,
     use: [
      'vue-style-loader',
      'css-loader',
      'sass-loader'
    ],
  },
  {
    test: /\.sass$/,
    use: [
      'vue-style-loader',
      'css-loader',
      'sass-loader?indentedSyntax'
    ],
  },
  { test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' },
  {
    test: /\.vue$/,
    loader: 'vue-loader',
    options: {
      loaders: {.
        'scss': [
          'vue-style-loader',
          'css-loader',
          'sass-loader'
        ],
        'sass': [
          'vue-style-loader',
          'css-loader',
          'sass-loader?indentedSyntax'
        ]
      }
      // other vue-loader options go here
    }
  },
  {
    test: /\.js$/,
    loader: 'babel-loader',
    include: [
      path.resolve(__dirname, "src"),
      path.resolve(__dirname, "node_modules/vuex-loading"),
      // path.resolve(__dirname, "node_modules/vue-authenticate")
    ],
  },
  {
    test: /\.(png|jpg|gif|svg)$/,
    loader: 'file-loader',
    options: {
      name: '[name].[ext]?[hash]'
    }
  }
  ]
},
 plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
      $t: 'VueI18n',
      $router: 'vue-router'
    })
  ],
resolve: {
  alias: {
   'vue$': 'vue/dist/vue.esm.js'
 },
 extensions: ['*', '.js', '.vue', '.json'],
 modules: [
  path.resolve('./src'),
  path.resolve('./node_modules')
 ]
},
devServer: {
  historyApiFallback: true,
  noInfo: true,
  overlay: true,
  inline:true,
  port: 8082
 },
 performance: {
  hints: false
 },
 devtool: '#eval-source-map'
}
}

使用 Mocha + webpack 测试单文件组件在 vuejs 上的单元测试中加载测试时出现运行时异常异常

Testing Single-File Components with Mocha + webpack got RUNTIME EXCEPTION Exception occurred while loading your tests in unit test on vuejs

unit-testing

chai

vue.js

mocha-webpack