导语
我这边尽量一步一步介绍
jest 介绍
jest 是一个 javaScript 测试框架, 目的在确保任何 javaScript 代码的正确性。
大概有下面这些特性
- 零配置 — jest 的目标是在大部分 javaScript 项目上实现开箱即用, 无需配置
- 快照 — 能够追踪大型对象的测试
- 隔离 — 测试程序拥有自己独立的进程,以最大限度地提高性能
- 简易的api
创建一个vue 测试项目
我们这边使用 vue2 的vue-cli。 其实由于在创建的时候vue-cli 就会让我们选要不要测试框架,选好后,选jest作为我们的测试框架就好了。
是不是很简单
jest入门使用
toBe, toEqual, not
Jest使用“匹配器”让你以不同的方式测试值。 本文档将介绍一些常用的匹配器。
test('two plus two is four', () => {
expect(2 + 2).toBe(4);
})toBe 使用 Object.is 来判断是否正确。 如果你需要检查一个对象 , 可以使用 toEqual 来替代。
test('object assignment', () => {
const data = {one : 1};
data['two'] = 2;
expect(data).toEqual({one : 1, two: 2});
})我们还可以测试匹配器的反面：
test('adding positive numbers is not zero', () => {
for (let a = 1; a < 10; a++) {
for (let b = 1; b < 10; b++) {
expect(a + b).not.toBe(0);
}
}
});区分 undefined, null , false
- toBeNull 仅仅判断 null
- toBeUndefined 仅仅判断 undefined
- toBeDefined 与 toBeUndefined 相反
- toBeTruthy 匹配if语句视为true的任何内容
- toBeFalsy匹配if语句视为false的任何内容
test('null', () => {
const n = null;
expect(n).toBeNull();
})数字
比较数字的大多数方法都具有匹配器等效项。
test('two plus two', () => {
const value = 2 + 2;
expect(value).toBeGreaterThanOrEqual(4)
})对于浮点相等，请使用toBeCloseTo而不是toEqual，因为您不希望测试依赖于微小的舍入误差。
test('adding floating point numbers', () => {
const value = 0.1 + 0.2;
expect(value).toBeCloseTo(0.3);
});字符串
可以使用toMatch根据正则表达式检查字符串
test('but there is a "stop" in Christoph', () => {
expect('Christoph').toMatch(/stop/);
});数组和可迭代数据
您可以使用toContain检查数组或可迭代项是否包含特定项：
const shoppingList = [
'beer',
'kleenex',
'paper',
]
test('the shopping list has beer on it', () => {
expect(shoppingList).toContain('beer');
})例外
如果要测试特定函数在调用时是否引发错误，请使用toThrow。
function compileAndroidCode() {
throw new Error('you are using the wrong JDK');
}测试异步代码
在JavaScript中，异步运行代码是很常见的。 当您具有异步运行的代码时，Jest需要知道它所测试的代码何时完成，然后才能继续进行其他测试。 jest 有几种处理方法。
回调函数
最常见的异步模式是回调
假如, 你有一个 fetchData (callback) 函数, 该函数可获取一些数据并在完成后调用 callback。 你要测试此返回的数据是否为字符串 peanum butter
test('the data is peanut butter', () => {
function callback(data) {
expect(data).toBe('peanut butter');
}
fetchData(callback);
});promises
如果您的代码使用Promise，则有一种更简单的方法来处理异步测试。 从测试中返回一个承诺，Jest将等待该承诺解决。 如果承诺被拒绝，则测试将自动失败。
例如，假设fetchData而不是使用回调，而是返回应为字符串’peanut butter’解析的Promise。 我们可以用以下方法进行测试：
test('the data is peanut butter', () => {
return fetchData().then(data => {
expect(data).toBe('peanut butter');
})
})Async/Await
或者, 你可以使用 async 和 await 在你测试用例中。 要编写异步测试, 得在传递给测试的函数前面使用 async 关键字。
test('the data is peanut' , async () => {
const data = await fetchData();
expect(data).toBe('peanut butter');
})你可以结合 async和await与 .resolves 或者 .rejects
test('the data is peanut butter', async () => {
await expect(fetchData()).resolves.toBe()
})
test('the fetch fails with an error', async () => {
await expect(fetchData()).rejects.toThrow('error');
});设置和拆除
通常在编写测试时, 你需要在测试运行之前进行一些设置工作, 而在测试运行后需要进行一些整理工作。 jest 提供了辅助功能来处理此问题
对许多测试重复设置
如果您有一些工作需要对许多测试重复进行，则可以使用beforeEach和afterEach。
beforeEach(() => {
console.log('before')
})
afterEach(() => {
console.log('after');
})
test('city', () => {
expect(1).toBeTruthy();
})一次性设置
beforeAll(() => {
console.log('before')
})
afterAll(() => {
console.log('after');
})
test('city' ,() => {
expect(1).toBeTruthy();
})
test('n1', () => {
expect(0).toBeFalsy();
})mock 函数
模拟函数允许您通过擦除函数的实际实现，捕获对该函数的调用（以及在这些调用中传递的参数），捕获用new实例化的构造函数实例以及测试时间配置来测试代码之间的链接。 返回值。
有两种模拟函数的方法：通过创建要在测试代码中使用的模拟函数，或编写手动模拟来覆盖模块依赖性。
使用一个 mock 函数
假设我们正在测试forEach函数的实现，该函数将为提供的数组中的每个项目调用一个回调。
function forEach(items, callback) {
for (let index = 0; index < items.length ; index ++) {
callback(items[index]);
}
}为了测试此功能，我们可以使用模拟功能，并检查模拟的状态以确保按预期方式调用回调。
const mockCallback = jest.fn(x => 42 + x);
forEach([0, 1], mockCallback);
// The mock function is called twice
expect(mockCallback.mock.calls.length).toBe(2);
// The first argument of the first call to the function was 0
expect(mockCallback.mock.calls[0][0]).toBe(0);
// The first argument of the second call to the function was 1
expect(mockCallback.mock.calls[1][0]).toBe(1);
// The return value of the first call to the function was 42
expect(mockCallback.mock.results[0].value).toBe(42);
