Jest测试异步代码

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示例使用相同的逻辑。

这些形式的不同并不代表测试代码的优略，你可以在代码库或甚至单个文件中同时使用它们。取舍取决于哪种风格使您的测试更简单。