前端自动化测试jest教程1-配置安装

1,796 阅读3分钟

前言

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

现在随处可见的单元测试,在主流框架以及UI组件中都可以见到,单元测试的优势就不言而喻了。本系列文章将带你学习前端自动化测试 jest框架 ,包括基本的配置、jest匹配器、异步代码测试、钩子函数、mock以及在vue项目中的实际应用等等,如果想继续学习后面文章,请关注我,后面会不断写完整个jest的教程

为什么选择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

效果图:

  1. index.test.js中写入代码(不懂没关系,后面会讲到)
const sum = require('./index')

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

效果图:

  1. 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转化后的代码

  1. index.jsindex.test.js内的导入导出模块代码改写成es6语法

改后的效果图:

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

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

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

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

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