JavaScript中经常有异步运行的代码。如果你要测试异步的代码，Jest需要知道他测试的代码是否已经完成异步动作，然后才可以进行测试。Jest有这几种方法来处理这个问题。
最常见的异步方式是回调函数。
例如，你有一个 fetchData(callback)函数，在获取一些数据以后机会调用 callback(data)来处理数据。你想测试返回值是不是字符串'嬷嬷哒'。
但是默认情况下，一旦回调完成了Jest的测试就完成了，这意味着测试将无法正常工作：
// 无法执行
test('返回值是不是嬷嬷哒', () => {
function callback(data) {
expect(data).toBe('嬷嬷哒');
}
fetchData(callback);
});
问题是，一旦 fetchData 完成，测试将会在调用回调之前完成。
有一种替代形式的 test 来解决这个问题。而不是将测试置于空参数的函数中，请使用一个名为done的参数。Jest将等待回调完成后进行测试。
test('返回值是不是嬷嬷哒', (done) => {
function callback(data) {
expect(data).toBe('嬷嬷哒');
done();
}
fetchData(callback);
});
如果 done() 从未被调用过，那么测试就会失败。
如果您的代码使用promises，则有一种更简单的处理异步测试的方法。只要从你的测试中得到promises，Jest将等待这个promises的resolve结果。如果promises被拒绝，测试将自动失败。
例如，我们把前面说的 fetchData 不是用回调，而是promises并且返回字符串‘嬷嬷哒'。我们就可以这样写测试：
test('返回值是不是嬷嬷哒', () => {
expect.assertions(1);
return fetchData().then(data => {
expect(data).toBe('嬷嬷哒');
});
});
一定要返回promise，如果你忘记了return，您的测试将在 fetchData 完成之前完成。
如果您希望拒绝使用.catch方法。必须添加expect.assertions以验证是否使用断言。否则满足条件的promise 永远不会失败。
test('测试 fetch 的错误', async () => {
expect.assertions(1);
return fetchData().catch(e =>
expect(e).toMatch('error')
);
});
Jest 20.0.0+ 的版本可以使用.resolves / .rejects #
您也可以在expect语句中使用.resolves匹配器，Jest将等待该promises的resolve结果。如果promises被拒绝，测试将自动失败。
test('the data is peanut butter', () => {
expect.assertions(1);
return expect(fetchData()).resolves.toBe('嬷嬷哒');
});
确保return断言 - 如果省略return语句，则在 fetchData 完成之前，您的测试将完成。
如果你不想使用.rejects匹配器。可以使用类似的.resolves匹配器。如果promise满足条件，测试将自动失败。
test('测试 fetch 的错误', () => {
expect.assertions(1);
return expect(fetchData()).rejects.toMatch('error');
});
或者，您可以在测试中使用async和await。要编写异步测试，只需给测试的函数前面使用async关键字。相同的 fetchData 方案可以通过以下方式进行测试：
test('返回值是不是嬷嬷哒', async () => {
expect.assertions(1);
const data = await fetchData();
expect(data).toBe('嬷嬷哒');
});
test('测试 fetch 的错误', async () => {
expect.assertions(1);
try {
await fetchData();
} catch (e) {
expect(e).toMatch('error');
}
});
当然，您可以 async和 await 配合 .resolves 或 .rejects 使用（在Jest 20.0.0+版本中可用）。
test('返回值是不是嬷嬷哒', async () => {
expect.assertions(1);
await expect(fetchData()).resolves.toBe('嬷嬷哒');
});
test('测试 fetch 的错误', async () => {
expect.assertions(1);
await expect(fetchData()).rejects.toMatch('error');
});
在这些情况下，async和await只是语法糖，与promise示例使用相同的逻辑。
这些形式的不同并不代表测试代码的优略，你可以在代码库或甚至单个文件中同时使用它们。取舍取决于哪种风格使您的测试更简单。
网友评论