最近公司想要从 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 https://vue-test-utils.vuejs.org/zh/ 插件来帮助我们快速的完成测试用例的书写.
实际上在使用过程中, 主要有两类问题, 一个是环境配置的问题, 要记住在写 jest 测试用例的时候, 需要引入各依赖的文件, 就像在 main.JS 中那样. 另外一个就是在写实际具体的测试用例的时候所遇到的具体的语法写法等问题. 比如 vue-router,vuex,axios 的使用方法等都是比较容易解决的部分, 在网上可以很简单的搜到使用方法, 我就不再重复的去写了. jest 官网和 Vue Test Utils https://vue-test-utils.vuejs.org/zh/ 实际上说的都比较清楚了.
最后, 本文章为工作中遇到的问题的一些记录, 以备查阅. 若有错误不足, 还望不吝指正, 互相学习.
来源: https://www.cnblogs.com/zaking/p/10520091.html