入门前端自动化测试一

一：Jest优点介绍和基本环境搭建

1.主流测试框架的比较

• Jasmine：js测试框架（BDD-集成测试开发框架），较早的测试框架，好用
• MOCHA：功能丰富，运行在Node.js和浏览器中，使异步测试变得简单有趣
• Jest：目前最流行，国内大公司都在使用

2.Jest优点（官网链接）

• 比较新（处于新技术的红利期）
• 基础好
• 速度快
• API简单
• 隔离性好
• IDE整合（vscode） — 生态支持好
• 多项目运行
• 覆盖率

3.Jest环境搭建

创建项目

npm init -y
npm i jest@24.8.0 -D
复制代码

package.json

"scripts": {
   "test": "jest"
 },
复制代码

4.写一个demo

js方法：

demo01.js

function eat01(money) {
 return money > 200 ? "澳洲大龙虾" : "虾粥";
}

function eat02(money) {
 return money > 1000 ? "想怎么吃就怎么吃" : "吃的相对经济";
}

module.exports = {
 eat01,
 eat02,
};
复制代码

test文件

demo01.test.js — 注意：test文件要写成 .test.js 结尾

const eat = require("./demo01");
const { eat01, eat02 } = eat;

test("eat方法1-200元", () => {
  expect(eat01(200)).toBe("虾粥");
});

test("eat方法2-1001元", () => {
  expect(eat02(1001)).toBe("想怎么吃就怎么吃");
});
复制代码

运行：npm run jest

运行结果：

5.基本配置和测试覆盖率生成

生成初始化配置：npx jest --init

生成代码覆盖率报告：npx jest --coverage

生成的网页版代码覆盖率报告：

6.Jest中的匹配器（以下列举为部分常见的匹配器）

• toBe()：相当于”绝对相等”

test("toBe匹配器01", () => {
    expect("测试").toBe("测试");  ---->  测试结果为通过
})

test("toBe匹配器02", () => {
    const a = {number: '007'}
    expect(a).toBe({number: '007'});  ---->  测试结果不通过
})
复制代码

• toEqual()：内容结果的匹配

test("toEqual匹配器", () => {
    const a = {number: '007'}
    expect(a).toEqual({number: '007'});  ---->  测试结果为通过
})
复制代码

• toBeNull()：null匹配器

test("toBeNull匹配器", () => {
    const a = null
    expect(a).toBeNull();  ---->  测试结果为通过
})
复制代码

• toBeUndefined()：undefined匹配器

test("toBeUndefined匹配器", () => {
    const a = undefined
    expect(a).toBeUndefined();  ---->  测试结果为通过
})
复制代码

• toBeDefined()：只要定义了的变量就能通过测试

test("toBeDefined匹配器01", () => {
    const a = 1
    expect(a).toBeDefined();  ---->  测试结果为通过
})

test("toBeDefined匹配器02", () => {
    let a
    expect(a).toBeDefined();  ---->  测试结果为不通过
})
复制代码

• toBeTruthy()：truthy匹配器

test("toBeTruthy匹配器01", () => {
    const a = 1
    expect(a).toBeTruthy();  ---->  测试结果为通过
})

test("toBeTruthy匹配器02", () => {
    const a = false
    expect(a).toBeTruthy();  ---->  测试结果为不通过
})
复制代码

• toBeFalsy()：falsy匹配器

test("toBeFalsy匹配器", () => {
    const a = false
    expect(a).toBeFalsy();  ---->  测试结果为通过
})
复制代码

• toBeGreaterThan()：”大于”匹配器

test("toBeGreaterThan匹配器", () => {
    const a = 10
    expect(a).toBeGreaterThan(9);  ---->  测试结果为通过
})
复制代码

• toBeLessThan()：”小于”匹配器

test("toBeLessThan匹配器", () => {
    const a = 10
    expect(a).toBeLessThan(11);  ---->  测试结果为通过
})
复制代码

• toBeGreaterThanOrEqual()：”大于等于”匹配器

test("toBeGreaterThanOrEqual匹配器", () => {
    const a = 10
    expect(a).toBeGreaterThanOrEqual(10);  ---->  测试结果为通过
})
复制代码

• toBeLessThanOrEqual()：”小于等于”匹配器

test("toBeLessThanOrEqual匹配器", () => {
    const a = 10
    expect(a).toBeLessThanOrEqual(10);  ---->  测试结果为通过
})
复制代码

• toBeCloseTo()：解决js浮点错误的匹配器

test("toEqual匹配器", () => {
    const one = 0.1
    const two = 0.2
    expect(one + two).toEqual(0.3);  ---->  测试结果为不通过
})

test("toBeCloseTo匹配器", () => {
    const one = 0.1
    const two = 0.2
    expect(one + two).toBeCloseTo(0.3);  ---->  测试结果为通过
})
复制代码

• toMatch()：匹配字符串的匹配器

test("toMatch匹配器", () => {
    const str = "小明，小红，小亮"
    expect(str).toMatch("小明");  ---->  测试结果为通过
})
复制代码

• toContain()：匹配数组/Set的匹配器

test("toContain匹配器01", () => {
    const str = ["小明","小红","小亮"]
    expect(str).toContain("小明");  ---->  测试结果为通过
})

test("toContain匹配器02", () => {
    const str = ["小明","小红","小亮"]
    const data = new Set(str)
    expect(str).toContain("小明");  ---->  测试结果为通过
})
复制代码

• toThrow()：匹配throw的匹配器

const throwNewErrorFunc = () => {
    throw new Error('this is Error')
}

const throwNewErrorFunc02 = () => {}

test("toThrow匹配器01", () => {
    expect(throwNewErrorFunc).toThrow();  ---->  测试结果为通过
})

test("toThrow匹配器02", () => {
    expect(throwNewErrorFunc02).toThrow();  ---->  测试结果为不通过
})

test("toThrow匹配器03", () => {
    expect(throwNewErrorFunc).toThrow('this is Error');  ---->  测试结果为通过
})

test("toThrow匹配器04", () => {
    expect(throwNewErrorFunc).toThrow('this is');  ---->  测试结果为不通过
})

// not匹配器 --> 取相反的意思
test("toThrow匹配器05", () => {
    expect(throwNewErrorFunc02).not.toThrow();  ---->  测试结果为不通过
})
复制代码

注：根据”技术胖”相关视频教程整理