多项目整合之 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时暴露出来许多问题。