前端自动化测试-Jest 快速入门

Jest 是一款优雅、简洁的 JavaScript 测试框架。

Jest 支持 Babel、TypeScript、Node、React、Angular、Vue 等诸多框架！

Github

入门

• 基础

// package.json 初始化   -y 跳过选项
npm init
// 安装
yarn add jest -D
// package.json
"scripts": {
  "test": "jest"
},
// 新建 .test.js文件 编写测试用例
复制代码

• 修改 jest 配置

// 运行
yarn jest --init
// 根据需求选择后 根目录生成jest.config.js
复制代码

• 添加 bable 处理 es6
  

  jest 默认是 CommonJs

// 安装依赖
yarn add @babel/node -D
yarn add @babel/core -D
yarn add @babel/preset-env -D
yarn add core-js@3 -D

// 新建.babelrc 配置更新  useBuiltIns 按需引入 polyfill
{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "usage",
        "corejs": 3,
        "debug": false
      }
    ]
  ]
}
复制代码

• 简单的例子

// math.js
export function add(a, b) {
  return a + b;
}

// math.test.js
import { add } from './math';
test('测试加法 3 + 7', () => {
  expect(add(3, 7)).toBe(10);
});

// 运行
yarn test
复制代码

前端自动化的优势

1.更好的代码组织，项目的可维护性增强
2.更小的 Bug 出现概率，尤其是回归测试中的 Bug
3.修改工程质量差的项目，更加安全
4.项目具备潜在的文档特性
5.拓展前端的知识面
复制代码

匹配器

• 基础用法

// matchers.test.js
复制代码

• 监听测试文件的变化

// package.json
"test": "jest --watchAll"
复制代码

Jest 命令模式

Watch Usage
 › Press f to run only failed tests.
 › Press o to only run tests related to changed files.
 › Press p to filter by a filename regex pattern.
 › Press t to filter by a test name regex pattern.
 › Press q to quit watch mode.
 › Press Enter to trigger a test run.
复制代码

异步代码的测试

// 引入axios
yarn add axios -D
// fetchData.js

// fetchData.test.js
复制代码

Jest 中的钩子函数

// Counter.js
// Counter.test.js
复制代码

Jest Mock

• 特点
  1.捕获函数的调用和返回结果，以及 this 和调用顺序
  2.它可以让我们自由的设置返回结果
  3.改变函数的内部实现

// mock.js
// mock.test.js
复制代码

Jest Mock 进阶

• 本地模拟异步请求

// mock2.js
jest.mock('./mock2');

// 或者更改全局配置 jest.config.js 测试文件可以不用写 jest.mock('./mock2');
automock: true,

// mock2 有个getNumber同步方法需要真实mock2.js 的调用
const { getNumber } = jest.requireActual('./mock2');
复制代码

Jest Mock Timers

// timer.js timer.test.js
jest.useFakeTimers(); // 模拟定时器
jest.runAllTimers(); // 执行所有定时器

jest.advanceTimersByTime(3000); // 快进3秒
复制代码

snapshot 快照测试

适用于配置文件, UI 组件的测试

核心：toMatchSnapshot、toMatchInlineSnapshot

snapshot.test.js;
复制代码

• 支持行内 snapshot

// toMatchInlineSnapshot 将快照放到测试用例里面， 必须安装prettier 依赖
yarn add prettier -D

复制代码

当快照发生更新的时候，是否确定更新快照，按 w，确定更新按 u；
多个快照需要更新，按 w，再按 i 进入交互模式选择，逐个确定按 u。

ES6 中类的测试

// 单元测试 utils.js utils.test.js

// 集成测试 demo.js demo.test.js
复制代码

Jest 中对 DOM 节点操作的测试

// 安装 jquery
yarn add jquery - D

// dom.js dome.test.js

复制代码

vscode 插件

// 安装jest 插件， 可以不用执行yarn test, vscode jest 会自动检测
// 通过测试，代码前面✅
Jest

command + shift + p
// 安装
code command in Path

// 以后可以在终端 在代码当前目录下 打开vscode编辑器
code ./
复制代码