vue-cli3.x下的vue-test-utils 初始搭建

初次接触单元测试，通过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

最好再安装下@types/mocha依赖（用Jest的话就是@types/jest）否则webstorm会警告不识别'describe'和'it'（不过不影响实际运行）

运行后报错，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，应该能够通过改写配置进行优化。

希望带佬们能对上述中有问题的地方提出改进意见，这里统一感谢。

转载请注明出处。