首先安装 Vue 测试套件以及 Mocha :

npm install --save-dev @vue/test-utils mocha mocha-webpack@next

设置浏览器环境:

npm install --save-dev jsdom jsdom-global

设置断言库:

npm install --save-dev expect

配置

package.json 中定义 test 脚本:

// package.json
{
  "scripts": {
    "test": "mocha-webpack --webpack-config config/webpack.config.js --require test/setup.js test/**/*.spec.js"
  }
}
  • --webpack-config:是 webpack 配置文件路径。
  • --require:会在测试之前加载的文件。
  • 最后一个是测试文件路径。

搞定?

搞定运行 npm run test

之前遇到了无测试内容的 Bug ,查过一番资料后,是因为 Mocha-Webpack 没支持 Webpack4。不过呢,现在已经可以通过安装  Mocha-Webpack@next 来解决这个问题。

再快一点!

通过 webpack-node-externals 外置 NPM 依赖,以提升测试速度。

npm install --save-dev webpack-node-externals

webpack.config.js 文件中添加以下内容

const nodeExternals = require('webpack-node-externals')

module.exports = {
  // ...
  externals: [nodeExternals()]
}

参考内容

Vue Test Utils

Testing Vue Components with Mocha and Webpack