工作笔记——使用Jest时遇到的一些问题

大家好，又见面了，我是你们的朋友全栈君。

　　最近公司想要从mocha+karma的前端单元测试方式转换到Jest，然后任务就分配给我了，好吧，在这之前连单元测试是什么都不知道。硬生生的开始写单元测试了，写这篇文章的初衷是因为在配置Jest的过程中有好多问题，百度几乎搜索不到，无奈本人英文太差，却又不得不去看英文文档。然后，想要写篇文章，记录下其中遇到的一些问题以及解决问题的方法，当然，现在还有不少问题没有解决，等到解决了之后再来更新…orz。

一，QUICK START时遇到的问题

　　首先，通过我们特别熟悉的命令，哦对，前提是你要安装了node，git。还要全局安装vue-cli，后面会把版本信息贴上的，这里不多说废话了。我们通过vue init webpack <yourname>命令来构建初始化的项目。不过在选择上，我们要选择Jest来做单元测试。

　　这样我们就得到了一个初始化，拥有Jest单元测试的项目了。版本信息如下：

 　　那么我们去试一下，查看package.json，我们发现启动单元测试的命令是npm run unit。哎？怎么报错了？嗯..你的报错信息应该可能大概也许是下面这个样子：

　　这是我们在使用Jest时遇到的第一个问题，解决的方式很简单，在test目录下的jest.config.js的配置中添加一项：

　　然后，再试一下npm run unit，我们发现测试通过了。至此，最基本的项目配置已经完成并顺利运行了。

　　我们继续往下看。

二、通过script标签引入的插件无法找到的问题。

　　我们先来想象一下这样的场景，我们在开发时候需要引入一个插件，就比如是百度地图API吧，但是又无法用npm install来安装（因为npm仓库没有这个库），所以我们在index.html中用script标签引入了BMap。就像这样：

　　接下来我们要在我们的项目中使用它，很简单，我们直接在初始化项目中的HelloWorld.vue中的mounted钩子里console.log(BMap)一下，在控制台中我们就可以看到一个对象，那么我们测试一下看看？

　　果然报错了，BMap is not defined。

　　在测试环境下，我们使用jest也需要引入开发环境下的各种插件，形成一个独立的环境体系，当然，我们也可以通过其它手段来造假数据。这个我们后面再说，既然找不到BMap，那么怎么办呢？

　　jest的配置中有一个globals配置项，我们是否可以在它身上做点文章?

　　首先在jest.conf.js中，我们可以在globals的配置项上加上一个名为BMap的对象，就像这样：

　　再运行一下测试，我们发现跑通了。但是可能还会有个问题，如果你在vue中用一个变量来暂存一个百度地图中的方法可能还会出现“找不到BMap.xxx”这样的错误。那么实际上，解决的方法也比较简单，给BMap对象下写入一个对应的方法就可以了。比如：

　　就像这样，实际上就是为jest的全局环境挂载上相应的对象。但是，个人觉得这种方法有点取巧。并不是特别的好的处理方式，比如说我用了几十个方法难道要写几十个假的构造函数么？不过目前还没有找到更好的方法。这种处理方式还是比较简单易懂的。

　　最后，如果我们想要给vue的单文件组件（通常我们用脚手架生成的项目都是这样的），还需要安装Vue Test Utils插件来帮助我们快速的完成测试用例的书写。

　　实际上在使用过程中，主要有两类问题，一个是环境配置的问题，要记住在写jest测试用例的时候，需要引入各依赖的文件，就像在main.js中那样。另外一个就是在写实际具体的测试用例的时候所遇到的具体的语法写法等问题。比如vue-router，vuex，axios的使用方法等都是比较容易解决的部分，在网上可以很简单的搜到使用方法，我就不再重复的去写了。jest官网和Vue Test Utils实际上说的都比较清楚了。

2019-03-22更新：

　　本以为在使用了globals配置项后可以比较妥善的解决全局环境变量的引入问题，但是在后续的单元测试编写的过程中会存在莫名其面的情况，就是偶尔会仍旧找不到全局环境下的BMap。

三、filecorverage未覆盖到的报错，虽然这种报错并不会影响你已经完成的单元测试的文件，但是会对覆盖率产生一定的影响，暂未解决。

四、复杂环境下经常会遇到各种对象找不到的情况，应该是jest测试环境的配置问题，暂未解决。

　　最后，本文章为工作中遇到的问题的一些记录，以备查阅。若有错误不足，还望不吝指正，互相学习。