如何搭建vue2单元测试环境-创新互联

小编给大家分享一下如何搭建vue2单元测试环境，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

凌云ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景，ssl证书未来市场广阔！成为创新互联的ssl证书销售渠道，可以享受市场价格4-6折优惠！如果有意向欢迎电话联系或者加微信：18980820575（备注：SSL证书合作）期待与您的合作！

1、用vue-cli生成一个新的项目，把单元测试需要的文件直接复制到你的项目中

vue init webpack vuetest

文件下载地址 源代码Github链接

2、安装Karma+Mocha模块，这个模块依赖比较多，我在遇到了坑，解决问题半天发现缺少了某个模块，在这里全部列出需要的模块

npm i -D karma karma-webpack phantomjs-prebuilt karma-phantomjs-launcher karma-phantomjs-shim karma-chrome-launcher karma-sourcemap-loader mocha karma-mocha sinon chai sinon-chai karma-sinon-chai karma-spec-reporter karma-coverage istanbul-instrumenter-loader

3、修改package.json，在scripts里添加启动代码(如果有unit就替换掉)

"unit": "karma start test/unit/karma.conf.js --single-run",

4、修改test目录下的index.js文件，这里是我遇到的大的坑，解决了半天，总是提示.scss文件出错，下面就是解决的办法。

const srcContext = require.context('../../src', true, /^\.\/(?!main(\.js)?$)/)

改为：

const srcContext = require.context('../../src', true, /^\.\/(style$) /)

5、可以复制vue-cli生成的项目文件来测试，如下图，并且配置好路由，测试一下单元测试模块是否安装成功

6、在项目中运行下面的命令，启动单元测试

npm run unit

同时在 test/unit/coverage 生成测试报告。

以上是“如何搭建vue2单元测试环境”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联成都网站设计公司行业资讯频道！

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

文章名称：如何搭建vue2单元测试环境-创新互联
网站链接：http://6mz.cn/article/ccpdij.html