学习笔记——在vue中如何配置Jest（一）

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

　　最近在搞Jest单元测试，如何在vue中安装和使用jest我就不说了，前一篇文章简单的说了一下在使用jest时遇到的一些问题，但是我觉得并没有真正的解决的很好。后面会在学习过程中更新前面的那篇文章，加入后续遇到的问题以及解决问题的方法，持续的做一个记录。

　　好了，废话不多说，咱们开始今天的内容吧。因为之前使用jest时候的项目是移植过来的项目，因为复杂的环境以及外部文件引入的等等等等的问题。采用的方式就是新建一个空的vue-cli生成的用jest来做单元测试的项目，这就导致了测试环境的配置是极为脆弱的。而且还有十分大的隐患。但是又没办法一下子解决。所以，我想在这篇文章中，整理记录一下jest的配置参数的用法等。

　　jest的配置文件是单独生成在unit文件夹下的一个独立文件，并没有和vue-cli生成的webpack构建的环境相关联。所以个人感觉这样更清爽一些吧。

一、默认配置文件参数的意义

　　我们先来看一张图，然后我一一介绍说明他们都是用来做什么的：

　　这是当前版本的vue-cli生成的jest.conf.js的配置文件，我们可以在package.json中的配置项里看到，我们在npm run unit 的时候，真正运行的就是这个文件的配置。

　　前面的文章说过了，要添加一个testURL来解决找不到localstorage的问题。并且修改mapCorverage为collectCorverage，前者是旧版本的参数。

　　那我们接下来一一介绍每个参数的配置及其含义。

　　rootDir：其实就是指整个项目的根目录，也就是最外层的目录。这里多句嘴，再解释下path.resolve(__dirname,”../../”)的意义，他最终返回的结果是该问见所在的根目录，简单来说__dirname返回的是当前目录，再向上两层，就是整个项目的根目录了。

　　moduleFileExtensions：这个文档解释的是“模块使用的文件扩展名数组，从左往右查找这些文件”。实际上我的理解，这个参数的意义就是让jest知道你需要测试覆盖的文件的扩展名都是什么。

　　moduleNameMapper：一种正则表达式到模块名的映射，匹配到的文件的内容可以是空的。我理解的是，可以通过该参数，来mock一些图片，css等静态资源文件，因为我们在测试的时候实际上是不太需要这些文件的，但是有需要引入它作为环境上的依赖。

　　transform：简单来说就是转换器，正则匹配到的文件可以通过对应模块的转换器来解决一些未来版本语法时可以使用它。通过正则来匹配文件，为匹配到的文件使用对应的模块。

　　snapshotSerializers：快照测试的插件，会生成测试文件的一个快照版本，可以再package.json中查看安装的快照插件。

　　setupFiles：运行一些测试环境所要依赖的模块的路径列表，比如引入vue，elementUI等插件的列表，以给测试提供完整的环境。

　　collectCoverage：是否收集测试时的覆盖率信息。

　　testURL：该选项是设置jsdom环境的参数。

　　coverageDirectory：jest输出覆盖率信息文件的目录。

　　collectCoverageFrom：为数组中匹配的文件收集覆盖率信息，即使并没有为该文件写相关的测试代码，需要将collectCoverage设置为true，或者通过–corverage参数来调用jest。

　　这样我们就解释完了基础配置的参数，学习过后，我们对jest的配置有了一个基本的了解。但是要想写单元测试文件，还是远远不够的。下一篇文章，我会介绍如何在为vue的单文件组件写测试用例。并且解释说明一下我在使用jest时候的一个疑问，什么是localVue，shallowMount与mount与localVue的区别是啥？localVue与Vue的区别是啥？那么今天就到这里啦…

　　参考：https://jestjs.io/docs/en/getting-started