在应聘前端岗位的时候，有位面试官问我，你知道前端的自动化测试吗？我懵逼了，然后人云亦云，结果可想而知，懂得都懂。

前言：

前端自动化测试方案，包括：单元测试、接口测试、功能测试、基准测试。

应用场景：

• 需求变更不频繁
• 项目周期足够长
• 自动化测试脚本可重复使用
• 代码规范可测试 安装jest：

粗略的介绍下Jest自动化测试的流程：

npm install --save-dev jest

首先创建 sum.js 文件：

function sum(a, b) {
  return a + b;
}
module.exports = sum;
// export function sum(a, b) {
//   return a + b;
// } 

其次创建 sum.test.js 文件：

import { sum } from "./sum.js";
// const sum = require('./sum.js');  // ES模块语法
test('异步方法测试',()=>expect(sum(1, 3)).toBe(4))

执行命令npm init,并将如下代码添加到 package.json 中：

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

运行 npm run test ，Jest 将输出如下信息：

匹配器

例如：在此代码中，expect(2 + 2)返回一个“期望”对象，.toBe(4)是匹配器

test('two plus two is four', () => {
    expect(2 + 2).toBe(4);
});

匹配器如：

• toBe
• toEqual
• toBeNull
• toBeUndefined
• toBeTruthy
• toBeGreaterThan
• toBeLessThan
• toContain
• 等等，有兴趣去看官网的详细解释

全局变量（包含四个声明周期）

• afterAll(fn, timeout)
• afterEach(fn, timeout)
• beforeAll(fn, timeout)
• beforeEach(fn, timeout)
• describe(name, fn)
• describe.each(table)(name, fn, timeout)
• 等等，有兴趣去看官网的详细解释

测试异步代码

例如，假设fetchData返回一个应该解析为字符串的承诺'123'。我们可以通过以下方式对其进行测试：有兴趣去看官网的具体用法

test('the data is peanut butter', () => {
  return fetchData().then(data => {
    expect(data).toBe('123');
  });
});
// 也可以在测试中使用`async`和`await`

// test('the data is peanut butter', async () => {
//   const data = await fetchData();
//   expect(data).toBe('123');
// });

// 还有回调用法、resolves、rejects等用法

其他

测试react程序、web框架、插件等模块测试。本文参考官网：Jest中文文档-语法详解

后续

其他的测试框架如： Mocha，可参考阮一峰的网络日志：测试框架 Mocha 实例教程