维护你和测试大哥的情谊,使用vue单元测试:Mocha

维护你和测试大哥的情谊:使用vue单元测试

注:

本来是自己慢慢摸索的,后来看到 京东设计中心写了一篇分享,切中我需求,对比多篇文章,杂糅写成此文。

Mocha + Webpack

走的是Vue-loader,100% 原汁原味。这里配置了 mocha-webpack

1
2
3
4
5
6
7
npm i -D @Vue/test-utils mocha mocha-webpack jsdom jsdom-global expect
npx mocha-webpack --webpack-config a.js
-- require a.js
test/**/*.spec.js
# webpack-config 指定webpack配置文件,可以设置单独的test 环境
# require 运行任何测试之前运行的配置,设置全局环境
# 测试文件集合

测试时候可能会引入一些npm包,为了不打包,也为了启动速度快,使用插件 webpack-node-externals

test.config 推荐的设置

1
2
3
4
5
6
7
// webpack.config.js
const nodeExternals = require('webpack-node-externals')

module.exports = {
devtool: 'inline-cheap-module-source-map',
externals: [nodeExternals()]
}

断言库,有人推荐 chai 有人推荐 expect 这个是jest的一部分,

准备 test/setup.js

1
2
require('jsdom-global')()
global.expect=require('expect')

参考文档

  1. Vue Test Utils 官方文档
  2. NutUI 3.0 中单元测试的探索和实践

请我喝杯咖啡吧~