Jest的使用及配置

如果想使用jest做前端的自动化测试的话，必须使用模块化语法，做模块化导出。

为什么需要做模块导出？
Jest在前端自动化测试中帮我们完成了两类的内容：

单元测试：也叫模块测试
集成测试：也叫多个模块测试

所以我们的业务代码，必须改造成模块的方式，符合jest的要求，它才能帮助你去做自动化测试。否则它没办法完成单元测试和集成测试。

Jest的安装使用

1. 安装：

npm  i  jest  -D

2. 代码要以模块的形式导出，在测试文件里引用
3. 修改package.json配置文件

"scripts": {"test": "jest"
}

4. 执行测试命令

npm  test

Jest的配置

当我们不做Jest配置时，jest一样可以正常使用，是因为jest是有默认的配置。如果我们想修改jest的默认配置，我们可以把jest的配置项暴露出来，以便我们手动配置。具体步骤如下：

1. 在项目目录下执行命令：npx jest --init

意思就是：调用node_modules下的jest命令，进行jest的初始化

初始化过程中，依次会询问你：选择运行环境？–> 是否生成覆盖率报告？–> 是否在每次测试完成后，做一些清除？根据需求填yes或者no即可。

jest初始化完成后，会在项目根目录下多出一个jest.config.js文件，文件里的module.exports对象所暴露对象里的配置就是jest的配置项。可以在这里修改jest的配置项。

测试覆盖率

在项目目录下执行：npx jest --coverage 获取测试覆盖率状态

会在终端以表格的形式展示测试覆盖率；
会在项目的根目录下生成一个coverage文件夹，在浏览器打开/coverage/lcov-report/index.html页面，会以网页的形式帮我们分析出每个文件的测试到底覆盖了多少的代码（也就是我们说的覆盖率）：

上图告诉我们，math.js中的所有的代码都被100%测试到了，说明测试覆盖率非常的广。

所以测试覆盖率指的就是：测试代码对我们原来功能性的代码做了百分之多少的测试，这个百分比就叫做代码测试覆盖率。

当我们使用vue或react框架进行开发时，项目中一般用的是ES Module的语法，但jest在node的环境下，不认识ES Module的语法，它只认识CommonJS的模块语法。所以jest也不认识ES Module的语法。但我们可以通过babel工具进行转换，把ES Module的语法转为CommonJS的模块语法，就可以啦。

2. jest和babel结合做语法转换

安装@babel/core 和 @babel/preset-env:

npm  i  @babel/core  @babel/preset-env  -D

创建.babelrc配置文件：

{"presets": [["@babel/preset-env", {"targets": {"node": "current"}}]]
}

当做好babel配置后，运行npm jest时，底层具体执行步骤是这样的：

当运行npm run jest时
jest内部集成了一个插件叫 babel-jest
插件会帮我们判断，是否安装了babel/core
如果已经安装了babel/core,就会去拿.babelrc中的一些配置
在运行测试之前，结合babel, 先把你的代码做一次转化（把ES Module语法转化为可以识别的Commonjs语法）
运行转化过的测试用例代码

做好babel配置后，jest底层会自动的和babel做一个结合，当我们再次执行npm test进行测试时，对于ES Module这种新语法的用户就可以正常执行了。