最近在搞 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
来源: https://www.cnblogs.com/zaking/p/10582228.html