基于已有的vue项目，搭建mocha+karma+phantomjs测试

最新推荐文章于 2024-03-14 11:52:32 发布

zwf193071

最新推荐文章于 2024-03-14 11:52:32 发布

阅读量422

点赞数

分类专栏： JS CSS3 文章标签： vue js

本文链接：https://blog.csdn.net/zwf193071/article/details/105703405

版权

33 篇文章 1 订阅

订阅专栏

8 篇文章 0 订阅

订阅专栏

最开始想基于现有的vue项目，插入自动化测试功能，主要是防止后台改了接口参数却没有告知前端的问题。预想的是jest功能，安装了vue-jest等包工具后，跑起test，发现一堆报错，去官网查了下，发现下面这句话：

vue-jest 目前并不支持 vue-loader 所有的功能，比如自定义块和样式加载。额外的，诸如代码分隔等 webpack 特有的功能也是不支持的。如果要使用这些不支持的特性，你需要用 Mocha 取代 Jest 来运行你的测试，同时用 webpack 来编译你的组件。

jest是功能最全的测试运行器。它所需的配置是最少的，默认安装了JSDOM，可是它的缺点特别多，比如在现有的项目插入jest，会出现很多你无法预料的错误。于是，我改换为mocha。

最开始是基于下列的官方文档，给已有的项目配置mocha

配置完成后，在命令行运行npm run test，报了很多错误，其中有一条与jsdom相关。官方文档jsdom的引入是这样的

require('jsdom-global')()

但jsdom至15版本之后，便要求配置时输入url，配置好option:url之后，仍然有其他未知错误。

几经周折，打算先mocha+karma，vue-test-utils暂时不引入，终于可以npm run test运行成功，下面是我的配置图：

运行出来的效果如下图所示：

关注