Jest测试框架入门之匹配器与测试异步代码

一、匹配器

1、对于一般的数字与字符串类型使用 toBe

test('adds 1 + 2 to equal 3', () => {expect(1 + 2).toBe(3);
});test('a + b to equal ab', () => {expect('a' + 'b').toBe('ab');
});

2、对于对象与数组类型使用 toEqual

// 数组项需一一对应
test('array is equal', () => {expect([1, 2, 3]).toEqual([1, 2, 3]);
})// 对象的属性顺序无所谓
test('object is equal', () => {expect({ name: 'wsh', age: 18 }).toEqual({ age: 18, name: 'wsh' });
})

3、对于null、undefined 和 boolean 类型可使用：

toBeNull：仅匹配null
toBeUndefined：仅匹配undefined
toBeDefined：非undefined均匹配
toBeTruthy：若 if 判断为真，则匹配
toBeFalsy：若 if 判断为假，则匹配

4、对于浮点数使用 toBeCloseTo 以消除误差

test('adding floating point numbers', () => {const value = 0.1 + 0.2;expect(value).toBeCloseTo(0.3);
});

5、若想测试一个函数在特定情况会抛出的错误，使用 toThrow

function compileAndroidCode() {throw new Error('you are using the wrong JDK');
}// 注意：expect的参数是一个函数，而不是函数调用
test('compiling android goes as expected', () => {expect(() => compileAndroidCode()).toThrow();expect(() => compileAndroidCode()).toThrow(Error);expect(() => compileAndroidCode()).toThrow('you are using the wrong JDK');expect(() => compileAndroidCode()).toThrow(/JDK/);
});

以上只是一些常用的匹配器，详见：传送门

二、测试异步代码

1、回调形式的异步函数

// fetchData用于模拟一个2秒之后返回的异步请求
const fetchData = (fn: Function) => {return new Promise((res: Function) => {setTimeout(() => {res('apple')}, 2000)}).then((data) => {fn(data)})
}test('the data is apple', () => {function callback(data: string) {expect(data).toBe('apple');}fetchData(callback);
});

运行以上用例，结果为：

看似成功了，但是有警告。如果我们让 fetchData 返回 banana，也就是将上面的 res(‘apple’) 改为 res(‘banana’)，再次跑这个用例，结果为:

可以看到还是成功了，但是多了一截说期望是 apple 但接收到了banana。这是回调形式异步函数的坑，根据官网，需要我们加一个 done 参数，我们具体看一看这个参数有什么用。

第一步，继续返回 banana ，并且接收 done 参数，但是不调用：

const fetchData = (fn: Function) => {return new Promise((res: Function) => {setTimeout(() => {res('banana')}, 2000)}).then((data) => {fn(data)})
}// 注意done我们仅接收，但不调用
test('the data is apple', (done) => {function callback(data: string) {expect(data).toBe('apple');}fetchData(callback);
});

结果为：

终于失败了，第一个导致失败的原因是接收到的 banana 与期望的 apple 不一致，第二个原因是这个用例不知道何时结束所以超时了。所以，done 的意义在于告知这是一个异步代码测试，且应该在所有expect函数执行完之后调用。

第二步，将返回值改回 apple，接收 done 参数并调用：

const fetchData = (fn: Function) => {return new Promise((res: Function) => {setTimeout(() => {res('apple')}, 2000)}).then((data) => {fn(data)})
}test('the data is apple', (done) => {function callback(data: string) {expect(data).toBe('apple');done();}fetchData(callback);
});

成功且无任何报错：

2、Promise形式的异步

const fetchData = () => {return new Promise((res: Function) => {setTimeout(() => {res('apple')}, 2000)})
}// 注意注意注意，必须return掉，否则这个用例会与上述未传入done参数的表现一致
test('the data is apple', () => {return fetchData().then(data => {expect(data).toBe('apple');})
});

以上是成功的 Promise，若想测试失败的 Promise 如下：

const fetchData = () => {return new Promise((res: Function, rej: Function) => {setTimeout(() => {rej('error')}, 2000)})
}test('the fetch fails', () => {return fetchData().catch(e => {expect(e).toMatch('error');})
});

官网在失败的 Promise 的例子中让我们确保添加了 expect.assertions 来验证执行了几次 expect 函数，在我写的例子中 fetchData 是一定失败的，所以不必添加 expect.assertions。实际测试异步代码的时候，expect.assertions 是必不可少的，具体可以看：如果您正在等待任何异步函数调用，是否需要使用Expect.assertions()?

3、.resolves / .rejects

const fetchData = () => {return new Promise((res: Function) => {setTimeout(() => {res('apple')}, 2000)})
}// 这里也必须return掉
test('the data is apple', () => {return expect(fetchData()).resolves.toBe('apple');
});

这只是写法不一样，用 resolves 代替了 .then。失败的如下：

const fetchData = () => {return new Promise((res: Function, rej: Function) => {setTimeout(() => {rej('error')}, 2000)})
}test('the fetch fails', () => {return expect(fetchData()).rejects.toMatch('error');
});

4、Async/Await

const fetchData = () => {return new Promise((res: Function) => {setTimeout(() => {res('apple')}, 2000)})
}test('the data is apple', async () => {const data = await fetchData();expect(data).toBe('apple');
});

以上是成功的异步，下面是失败的：

const fetchData = () => {return new Promise((res: Function, rej: Function) => {setTimeout(() => {rej('error')}, 2000)})
}test('the fetch fails', async () => {try {await fetchData();} catch (e) {expect(e).toMatch('error');}
});

async、await 可以与.resolves 和 .rejects 同用：

const fetchData = () => {return new Promise((res: Function) => {setTimeout(() => {res('apple')}, 2000)})
}test('the data is apple', async () => {await expect(fetchData()).resolves.toBe('apple');
});

以上是成功的，下面是失败的：

const fetchData = () => {return new Promise((res: Function, rej: Function) => {setTimeout(() => {rej('error')}, 2000)})
}test('the fetch fails', async () => {await expect(fetchData()).rejects.toMatch('error');
});