共计 626 个字符，预计需要花费 2 分钟才能阅读完成。
初次接触单元测试，通过 vue-test-utils 的官方推荐配置发现一堆问题，按官方的配置来看是 vue-cli2.x 版本的，这里记录下 cli3.x 版本下的初步搭建过程
技术栈
karma+mocha+chai+@vue/test-utils (vue-cli3.x 版本下)
首次搭建
创建项目时没有选择开启单元测试，单元测试为后续手动添加
单元测试相关的依赖列表：
然后按照搬了官方的测试用例，在测试用例中发现 IDE 提示在从 chai 中引入 expect 时报错
再次添加依赖
虽然前面已经添加了 karma-chai，但既然报错那就再添加下 chai 吧。
继续看到 IDE 提示 ’describe’ 以及 ’it’ is not defined
继续配置
这里需要在 eslintrc.js 的 env 中添加 mocha
运行后报错，Cannot find module ‘./webpack.config.js’
最后修改
由于用 vue-cli3.x 创建的项目根目录不再有 webpack.config.js, 所以需要修改 karma.conf.js 中引入 webpack.config.js 的路径
改为
再次运行，总算成功了。
总结
虽然在 vue-cli3.x 下单元测试成功运行了，但这次仅尝试了 karma+mocha+chai 的方式，测试用例也非常基础，并且怀疑某些依赖属于重复安装，例如 karma-chai 和 chai，应该能够通过改写配置进行优化。
希望带佬们能对上述中有问题的地方提出改进意见，这里统一感谢。
转载请注明出处。
正文完
