多项目整合之 karma 单元测试踩坑记

重构内容:采用lerna的多项目整合结构;vue-resource替换为fetch

重构之后单元测试跑不通,下面列举了碰到的问题和提供的解决方案

问题1

提示错误:

原因分析:

因为有配置相应的MockJS对测试请求进行拦截,不应该出现404的错误, 在debug模式下,发现发起了localhost的请求,说明请求没有被拦截,初步猜测是重构为fetch请求的原因。

将fetch请求换成XHR后可以被拦截,查看MockJs的源码, 拦截的原理如下:

可见MockJs只支持拦截XMLHttpRequest请求,包括封装他的$.ajax、vue-resouce等,而不能拦截fetch请求。

解决方案:

采用fetch-mock库,可以用于拦截非XHR的fetch请求。

问题2

到这一步如果采用 浏览器做单元测试就ok了, 但是在linux服务器上配置CI时,服务器没有Chrome浏览器,会在 这一步报错,此时有两个解决方案:

在linux服务器上安装

使用 浏览器做单元测试

尝试了一下方案一,安装配置了 后,启动不起来chrome,报错 。因为方案一存在缺陷,没有接着尝试。 方案一存在的缺陷:

导致项目配置单元测试需要依赖服务器上的Chrome。

Chrome作为单元测试的浏览器,由于Chrome本身支持ES6的一些语法,会掩盖某些 没有应用好的问题, 在下面采用 的时候这些问题就很突出了。

使用 浏览器做单元测试

问题3

提示错误:

原因分析:

报错 , 看了一下资源代码,是在

这一行出的错,看起来是PhantomJS不支持ES6语法 (如果采用Chrome,因为其支持部分ES6语法则不会报错),但是在karam的配置里已经用webpack转义过资源代码了, 为什么会出现不支持ES6报错的情况呢?

这一原因是跟lerna的多项目整合有关的,根据lerna的项目结构:

如果对project1配置单元测试,而project1里引用了project2的代码,则project1里的babel不会作用于这部分project2里的代码, 这个文件就是在project2里被project1引用的,所以没有被转译。

解决方案:

给project2项目中加入单独的 , 并安装相关babel依赖,配置如下:

问题4

提示错误:

原因分析:

这个错误其实是跟在IE浏览器下会报的错一样,都是因为依赖的 这个库内部代码直接用了ES6的 (并不知道他为什么要这么做)。

解决方案:

安装 这个依赖,并且在karma的配置文件中先于测试的文件引用:

问题5

提示错误:

原因分析:

这是一个完全看不出原因的错..,看起来跟fetch的promise有关,但是上面已经做过拦截fetch的工作了,并且也对promise进行了转义。

采用chrome没有这个错误

可以推断出是因为PhantomJS不支持fetch...

解决方案

安装 这个库,用于兼容不支持 的浏览器

总结

解决了上述的问题后,就能成功将单元测试跑起来啦。

MockJs不支持fetch

由与之前采用Chrome做测试,Chrome支持许多较新的语法,导致换为PhantomJS时暴露出来许多问题。

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180323G1BIQQ00?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

同媒体快讯

扫码关注腾讯云开发者

领取腾讯云代金券