前言

前端早已不在是简单的切图仔，web前端工程师也在逐渐淡出江湖。大前端的时代早已来临，面对日新月异的技术我们只能不断学习，逐个点亮技能点。

为什么选择jest？

零配置：在大部分项目中都可以实现开箱即用，无需配置 速度快：根据文件的修改进行测试，不会每次测试全部实例 快照功能：能够进行简单快速的测试 隔离性好：不同的测试文件环境独立，不会相互影响 api简单 mock丰富 等等

基本安装配置

1. 创建demo文件夹
2. 进入文件夹中运行npm init 初始化一个package.json文件
3. 安装jest npm install --save-dev jest
4. 在demo文件夹中新建两个文件index.js index.test.js
5. 在index.js中写入代码

function sum(a, b) {
  return a + b
}

module.exports = sum

6. 在index.test.js中写入代码（不懂没关系，后面会讲到）

const sum = require(./index)

test(测试 sum, () => {
  expect(sum(1, 2)).toBe(3)
})

7. 在package.json中的script加入以下命令

最后运行npm run test 即可，出现下面这样，就表示基本配置完成

不知道你们有没有发现，上面的模块导出和导入都是使用commonjs的规范，在node环境中是没有问题的，但是实际开发中我们的代码是运行在浏览器端的。因此我们需要转换成浏览器能够识别的ES6模块方法,本身jest是不支持ES6的模块方法，我们可以借用babel来实现

使用babel让jest支持ES6模块导入导出

1. 安装babel模块 npm install --save-dev @babel/core @babel/preset-env
2. 在demo文件夹下新建一个.babelrc，并写入以下代码

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

这段babel配置意思是，根据当前node环境，自动将语法转换成commonjs的语法

注： 当你运行npm run jest的时候，jest内部有个babel-jest模块会检测是否有babel，如果有就去加载babel配置文件，然后再去测试经过babel转化后的代码

3. 将index.js和index.test.js内的导入导出模块代码改写成es6语法

4. 运行npm run test，即可看见测试成功的提示

到目前为止，我们已经完成的将jest的运行环境搭建起来，并成功的支持了es6的模块语法，后面的教程基本上都是以demo的目录结构为基础，进行一些api的讲解，大家有兴趣学习后面的可以将文件保存好以备后面的教程练习

下一节，我将介绍上面我们写的代码作用，以及重点jest中匹配器部分，jest的匹配器有非常多，我这里只介绍部分在项目中会常用到的匹配器。

本人能力有限，文章可能会有不正确或者不恰当的部分，希望你可以指出

关注公众号，和我一起学习前端必备技能，前端自动化测试jest