jest测试ajax,搭建Jest前端测试框架总结

先说一下我要使用Jest的原因：由于开发提测了一个js的公共组件，需要测试人员对此组件的功能进行测试。因为提测的直接就是js文件，所以我们也就只能对其中的方法进行类白盒测试。

知道了为什么测，那接下来就是怎么测。很容易的想到了需要一个测试框架，因为毕竟不能这次测完就完了，写一堆硬测试代码放在那里就不管了不是正确的工作方式。于是就上网查了下主流的前端测试框架，最终为了省事，选择了好上手的Jest。选择原因可参考：前端测试框架对比

工具选好了，那就开始安装：

第一步：创建工程

创建一个空的工程，我使用的IDE是webstorm，很简单就能搞定。

第二步：初始化package.json

在shell中输入以下命令，初始化前端项目并生成package.json

npm init -y

运行完后如下图：

image.png

第三步：安装Jest及相关依赖

在shell中输入以下命令，安装测试所需要的依赖

npm install -D jest babel-jest babel-core babel-preset-env regenerator-runtime

babel-jest、 babel-core、 regenerator-runtime、babel-preset-env这几个依赖是为了让我们可以使用ES6的语法特性进行单元测试，ES6提供的 import 来导入模块的方式，Jest本身是不支持的。

安装完毕后，就可以在下面图中的地方找到它们：

image.png

第四步：添加.babelrc文件

在项目的根目录下添加.babelrc文件，并在文件复制如下内容:

{

"presets": ["env"]

}

第五步：修改package.json中的test脚本

打开package.json文件，将script下的test的值修改为jest：

"scripts": {

"test": "jest"

}

到这里为止，jest的测试框架搭建基本上就算结束了。但是其实针对于我们自己业务测试的要求还相差较远，想想看，我们想测试的js文件在哪里？怎么保证每次测试的都是最新的？

接下来就解决上面的问题

第六步：在package.json中增加依赖包

打开package.json文件，增加dependencies字段并在其中填入需要引入的测试包名称，如下图：

image.png

第七步：设置下载镜像

因为第六步中我们明确了需要引入待测试的包，这个之后就可以通过node install来下载它了。但是如果镜像没有设置好(比如还是默认的)，有可能下载时找不到它。那接下来就需要通过命令设置registry，如：

npm config set registry https://xxx.xingshulin.com/

设置完成后可以通过下面的命令查看：

npm config list

image.png

第八步：下载

通过npm install下载

第九步：更新待测试包为最新

由于每次测试都需要对开发最新的代码进行验证，所以一定要保证每次的包都是最新的。按照上面的例子来说，可以使用下面的命令实现包的更新：

npm i --save @xsl/utils@latest

第十步：安装日志模块

既然是测试框架，日志输出那就必不可少了，总不能测试的时候看console吧。我这边用的是log4js，安装步骤如下：

在工程中运行命令行安装log4js(当然需要在package.json中看到它)

npm install log4js

创建logConf.json文件并创建好logs文件夹

{

"appenders": {

"resultLogs": { "type": "file", "filename": "./logs/result.log" },

"console": { "type": "console" }

},

"categories": {

"default": { "appenders": ["console","resultLogs"], "level": "info" }

}

}

image.png

创建log4js.config.js文件

export default function logger() {

var log4js = require("log4js")

var log4js_config = require("../logConf.json")

log4js.configure(log4js_config)

return log4js.getLogger()

}

如图：

image.png

在用例中引用并使用，如图：

image.png

第十一步：问题处理

在需要用到await和async时，很有可能会遇到报错：ReferenceError: regeneratorRuntime is not defined

解决方案是在package.json文件中加入@babel/plugin-transform-runtime和@babel/preset-env

image.png

然后运行命令：

npm install

之后在.babelrc文件中加入图中内容：

image.png

axios请求报 ERROR: Cross origin http://localhost forbidden

这是因为axios的版本太低造成的，运行下面命令就能解决：

npm install axios

到此为止，一个适合我们的JS测试环境就完全搭建起来了，之后向扩展任何包都可以采用同样的方式。如何运行及编写断言可以参考文章：使用Jest测试JavaScript

大部分的内容都受益于这篇牛文～

还可以参考：https://deltice.github.io/jest/docs/zh-Hans/getting-started.html#content

这个更是详细。

如果解决了你们的问题请不要犹豫的赞我呦～