既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上软件测试知识点，真正体系化！
由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新
// utils.test.js
import { requestSuccess } from './utils';
// 这个describe可以不用纠结，理解成几份用例的集合，只是统一为异常输入的描述
describe('requestSuccess方法异常输入测试用例', () => {
test('response为空对象测试', () => {
const input = {};
const output = requestSuccess(input);
expect(output).toBeUndefined();
});
test('response为undefined测试', () => {
const output = requestSuccess();
expect(output).toBeUndefined();
});
test('response为Number类型测试', () => {
const output = requestSuccess(123);
expect(output).toBeUndefined();
});
});
在写了这么多的异常输入的测试用例之后，你会发现你一开始写的requestSuccess不够强大，导致单元测试用例执行失败，所以你可以一遍又一遍的修改你的源码，直至测试用例都通过。
总结： 如何进行有效的单元测试，最简单的做法就是考虑各种异常/边界输入值，编写相应的测试用例，通过单元测试的执行，优化你的代码。
当然做好单元测试，并不仅仅只是说考虑各种异常输入即可，实际还会涉及到开发时候 的考虑(比如常说的测试驱动开发之类的)以及非常多的实现细节，这个可能就需要你慢慢的理解了。
Jest
介绍
Jest is a delightful JavaScript Testing Framework with a focus on simplicity.
It works with projects using: Babel, TypeScript, Node, React, Angular, Vue and more!
官方的介绍就是上面2段话，就是说jest是一个让人愉悦的js测试框架，专注于简单性。可以配合babel、ts、node、react、angular、vue等其他库 一起使用。
我们前文提及的什么describe、test、expect方法等等在Jest中都有相应的api。
一、基础教程
安装
可以使用yarn或者npm进行安装
yarn add jest -D | npm i jest -D
源码开发
这里举了一个简单的例子，实际组件开发需要使用ts以及其他UI测试框架。
例如开发一个基础方法，返回2个参数的和。文件名为sum.ts
// sum.js
function sum(a, b) {
return a + b;
}
export default sum;
测试用例编写
首先我们根据上面的目标文件(sum.js)创建一个测试用例文件-- sum.test.js， 测试用例文件名称统一为*.test.js(后缀根据实际场景区分为.js或者.ts或者.tsx)
// sum.test.js
import sum from './sum';
test('adds 1 + 2 to equal 3', () => {
expect(sum(1, 2)).toBe(3);
});
开始测试
添加下面的部分到你的package.json中
{
"scripts": {
"test": "jest"
}
}
最后，执行yarn testornpm run test命令，Jest将会打印如下信息:
PASS ./sum.test.js
✓ adds 1 + 2 to equal 3 (5ms)
就这样，基于jest的一个基础单元测试流程走好了，Jest的单元测试核心就是在test方法的第二个参数里面，expect方法返回一个期望对象，通过匹配器(例如toBe)进行断言，期望是否和你预期的一致，和预期一致则单元测试通过，不一致则测试无法通过，需要排除问题然后继续进行单元测试。
更多的配置以及命令行参数请参考官方文档下面开始讲解一些核心API。
二、核心API
全局方法
在你的测试文件中，Jest将下面这些方法和对象放置全局环境，所以你无需再显式的去require或者import。当然，如果你更喜欢显式的import，也可以使用例如import { describe, expect, it } from '@jest/globals’的方式。
1、test(name, fn, timeout)
test有别名it，两个方法是一样的。
第一个参数是你想要描述的测试用例名称; 第二个参数是包含测试期望的函数，也是测试用例的核心。第三个参数(可选)是超时时间，也就是超过多久将会取消测试（默认是5秒钟）
Note: 如果fn返回的是个promise，Jest在完成测试前将会等待Promise达到resolved状态。具体情况本文下面也会讲到如何对异步代码进行测试。
匹配器
Jest使用匹配器可以让你使用各种方式测试你的代码，Jest中的匹配器实际就是expect方法返回的期望对象中包含的相关方法。官方提供了非常多的匹配器，完善的学习请查看官方文档。
下面摘选了几个最常见的匹配器方法。
1、.toBe(value)
toBe是最简单最基础的匹配器，就是判定是否精确匹配，toBe方法使用了Object.is方法来测试精确相等。
Object.is方法的判定准则可以参考这里
test('two plus two is four', () => {
expect(2 + 2).toBe(4);
});
在测试中，你有时需要区分 undefined、 null，和 false，但有时你又不需要区分。 Jest 让你明确你想要什么。
- toBeNull 只匹配 null
- toBeUndefined 只匹配 undefined
- toBeDefined 与 toBeUndefined 相反
- toBeTruthy 匹配任何 if 语句为真
- toBeFalsy 匹配任何 if 语句为假
2、.not
非常容易理解，一般就是反向测试
test('two plus two is four', () => {
expect(2 + 2).not.toBe(4);
});
3、.toEqual
递归检查对象或数组的每个字段
和上面的toBe进行对比，toBe对比俩对象对比的是内存地址，toEqual比的是属性值。
test('object assignment', () => {
const data1 = { one: 1, two: 2 };
const data2 = { one: 1, two: 2 };
expect(data1).toBe(data2); // 测试失败
expect(data1).toEqual(data2);// 测试通过
});
4、expect.assertions
expect.assertions(number) 验证一定数量的断言在某个测试用例中被调用。通常在异步代码测试中非常有用，目的就是为了确保所有的断言被真实的调用了。
比如下面这个例子，如果去掉了expect.assertions(2), 那么测试用例会通过测试，但实际的需求应该是失败的，因为我们最初的期望是catch中的断言也会被调用。而有了expect.assertions(2)，Jest会判断断言实际调用的数量和我们预期是否一致，如果不一致则说明测试失败。
test('doAsync calls both callbacks', () => {
expect.assertions(2);
return Promise.resolve(123).then((data: number) => {
expect(data).toBe(123);
return; // 例如手抖写了return
// 因为某些原因下面的代码没有执行
throw new Error('报错了');
}).catch(err => {
expect(err).toBe('报错了');
});
});
异步代码测试
在JavaScript中执行异步代码是很常见的。 当你有以异步方式运行的代码时，Jest 需要知道当前它测试的代码是否已执行完成，然后它可以转移到另一个测试。 Jest有若干方法处理这种情况。
回调
最常见的异步模式就是回调函数，例如下面的setTimeout方法，下面的测试用例无法通过，原因是Jest无法知道callback具体的调用时间，所以会造成测试已经结束，但是setTimeout的callback还没有执行。
test('the data is peanut butter', () => {
function callback(data: string) {
expect(data).toBe('peanut butter');
}
setTimeout(() => {
callback('peanut butter');
}, 2000);
});
想要解决上面的问题，非常简单，很容易就会联想到消息通知机制，也就是在callback调用的时候通知Jest，表示当前测试用例通过，可以跑下一个测试。
test方法的第二个参数fn，可以添加一个done参数，done是一个方法，调用了done，就是通知Jest测试完成，当然如果你的测试用例中的done方法始终没有执行，那么你的测试也会失败（超时），所以最好的方式就是加上try catch。
test('the data is peanut butter', done => {
function callback(data: string) {
try {
expect(data).toBe('peanut butter');
done();
} catch (err) {
done(err);
}
}
setTimeout(() => {
callback('peanut butter');
}, 2000);
});
Promise
如果你的代码使用了Promise， Jest提供了一种更加直接的方式去处理异步测试。在test第二个参数fn中直接返回一个promise，Jest就会等待这个promise达到resolved状态，如果达到了fulfilled状态，测试将会自动失败。
例如这个案例，此测试用例能够正常的通过
test('promise resolved', () => {
return new Promise(resolve => {
setTimeout(() => {
resolve('resolved');
}, 2000);
}).then((data: string) => {
expect(data).toBe('resolved');
});
});
如果promise fulfilled如下，则测试用例会跑失败
test('promise fulfilled', () => {
return Promise.reject('fulfilled').then((data: string) => {
expect(data).toBe('fulfilled');
})
});
当然我们也可以使用catch方法，例如下面这个例子，测试用例就能够正常的通过。
test('promise fulfilled', () => {
expect.assertions(1);
return Promise.reject('fulfilled').catch(err => {
expect(err).toMatch('fulfilled');
});
});
promise代码可以配合匹配器.resolves和rejects一起使用，使用案例如下:
test('promise resolved', () => {
return expect(Promise.resolve('resolved')).resolves.toBe('resolved');
});
test('promise fulfilled', () => {
return expect(Promise.reject('fulfilled')).rejects.toMatch('fulfilled');
});
Async/Await
如果你的代码使用了Promise， Jest提供了一种更加直接的方式去处理异步测试。在test第二个参数fn中直接返回一个promise，Jest就会等待这个promise达到resolved状态，如果达到了fulfilled状态，测试将会自动失败。
const TEN = 10;
const BASE = 5;
function fetchData () {
return new Promise((resolve, reject) => {
const random = Math.random() * TEN;
random > BASE ? resolve(random) : reject(random);
});
}
test('the random promise', async () => {
expect.assertions(1);
try {
const random = await fetchData();
expect(random).toBeGreaterThan(BASE);
} catch (e) {
expect(e).toBeLessThanOrEqual(BASE);
}
});
Mock Functions
Mock 函数简单的说就是模拟一个函数，这个功能很强大，例如nodejs中没有DOM/BOM，及时是jsdom也会缺少一些api，那么我们可以使用mock函数来进行一些测试，具体暂不详细说明。
有两种方法可以模拟函数：要么在测试代码中创建一个 mock 函数，要么编写一个手动 mock来覆盖模块依赖。
使用 mock 函数
假设我们要测试函数 forEach 的内部实现，这个函数为传入的数组中的每个元素调用一次回调函数。
function forEach(items, callback) {
for (let index = 0; index < items.length; index++) {
callback(items[index]);
}
}
为了测试此函数，我们可以使用一个 mock 函数，然后检查 mock 函数的状态来确保回调函数如期调用。
const mockCallback = jest.fn(x => 42 + x);
forEach([0, 1], mockCallback);
// 此 mock 函数被调用了两次
expect(mockCallback.mock.calls.length).toBe(2);
// 第一次调用函数时的第一个参数是 0
expect(mockCallback.mock.calls[0][0]).toBe(0);
// 第二次调用函数时的第一个参数是 1
expect(mockCallback.mock.calls[1][0]).toBe(1);
// 第一次函数调用的返回值是 42
expect(mockCallback.mock.results[0].value).toBe(42);
.mock 属性
所有的 mock 函数都有这个特殊的 .mock属性，它保存了关于此函数如何被调用、调用时的返回值的信息。 .mock 属性还追踪每次调用时 this的值，所以我们同样可以也检视
Mock 的返回值
const filterTestFn = jest.fn();
// Make the mock return `true` for the first call,
// and `false` for the second call
filterTestFn.mockReturnValueOnce(true).mockReturnValueOnce(false);
const result = [11, 12].filter(num => filterTestFn(num));
console.log(result);
// > [11]
console.log(filterTestFn.mock.calls);
// > [ [11], [12] ]
Mocking Modules
在Jest单元测试的真实场景中，会有很多的数据来自接口，但是Jest并不推荐直接在测试代码中去调用真实的接口，因为这可能会让测试变得非常缓慢而且脆弱，所以jest.fn().mockResolvedValue提供了mock接口的方式，使用假数据进行测试。
test('async test', async () => {
const asyncMock = jest.fn().mockResolvedValue(23);
**既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上软件测试知识点，真正体系化！**
**由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新**
**[需要这份系统化的资料的朋友，可以戳这里获取](https://bbs.csdn.net/forums/4f45ff00ff254613a03fab5e56a57acb)**
).mockResolvedValue提供了mock接口的方式，使用假数据进行测试。
test(‘async test’, async () => {
const asyncMock = jest.fn().mockResolvedValue(23);
[外链图片转存中…(img-3kRBjHjX-1715128580310)]
[外链图片转存中…(img-aEvvSw3z-1715128580311)]
[外链图片转存中…(img-KhM1GsGK-1715128580311)]
既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上软件测试知识点，真正体系化！
由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新
2443
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
