转载地址
React 16 Jest如何进行异步程序测试
项目初始化
git clone https://github.com/durban89/webpack4-react16-reactrouter-demo.git
cd webpack4-react16-reactrouter-demo
git fetch origin
git checkout v_1.0.25
npm install异步程序测试
首先，在Jest中启用Babel支。执行如下安装命令
npm install babel-jest babel-core regenerator-runtime --save-dev下面实现一个简单的模块，从API中获取用户数据并返回用户名。
src/lib/user.js添加如下代码
import request from './request';
static getUserName(userID) {
return request(`/users/${userID}`).then(user => user.name);
}
在上面的实现中，我们希望request.js模块返回一个promise。然后通过传递用户ID来获取用户信息，最后得到一个用户名称。
request.js的获取用户信息的实现如下：src/lib/request.js
const http = require('http');
export default function request(url) {
return new Promise((resolve) => {
http.get({
path: url,
}, (response) => {
let data = '';
response.on('data', (o) => {
data += o;
return data;
});
response.on('end', () => resolve(data));
});
});
}这里的话希望在测试中不访问网络，所以在__mocks__文件夹中创建一个request.js，手动模拟网络请求(该文件夹区分大小写，'__MOCKS__'是不起作用的)。
它可能看起来像这样src/lib/__mocks__/request.js
const users = {
4: {
name: 'Mark',
},
5: {
name: 'Paul',
},
};
export default function request(url) {
return new Promise((resolve, reject) => {
const userID = parseInt(url.substr('/users/'.length), 10);
process.nextTick(() => {
if (users[userID]) {
return resolve(users[userID]);
}
return reject({
error: `User with ${userID} not found.`,
});
});
});
}
现在为这个异步的功能编写一个测试。src/__tests__/user_async.test.js
import Users from '../lib/user';
jest.mock('../lib/request');
// The assertion for a promise must be returned.
it('works with promises', () =>
// expect.assertions(1); // 当前版本加了这行总是报错，暂时未注释
Users
.getUserName(4)
.then(data => expect(data).toEqual('Mark')));
运行测试，正常通过测试，如果问题可加群沟通
jest.mock('../lib/request')会告诉Jest去使用我们手动模拟的mock，'it'期望返回一个Promise，这个Promise的返回结果是resloved。
只要最后返回一个Promise，我们就可以链接尽可能多的Promise，并且随时调用'expect'。
.resolves
有一种不那么冗长的方式是使用'resolves'，让它与任何其他匹配器一起unwrap一个fulfilled promise的值。
如果promise是rejected，则断言将失败。如下
it('works with resolves', () => {
expect.assertions(1);
return expect(user.getUserName(5)).resolves.toEqual('Paul');
});async/await
使用async/await语法编写测试很容易。可以写一个和上面实例一致的测试。如下
import Users from '../lib/user';
jest.mock('../lib/request');
it('works with async/await', async () => {
const data = await Users.getUserName(4);
expect(data).toEqual('Mark');
});
it('works with async/await and resolves', async () => {
expect.assertions(1);
await expect(Users.getUserName(5)).resolves.toEqual('Paul');
});为了使得测试中支持 async/await, 需要安装 babel-preset-env 并且在开通这个属性在.babelrc文件中.
Error handling
可以使用.catch方法处理错误。
确保添加expect.assertions以验证是否调用了一定数量的断言。
否则，一个fulfilled promise不会使测试失败：如下
import Users from '../lib/user';
jest.mock('../lib/request');
test('tests error with promises', async () => {
expect.assertions(1);
return Users.getUserName(2).catch(e =>
expect(e).toEqual({
error: 'User with 2 not found.',
}));
});
it('tests error with async/await', async () => {
expect.assertions(1);
try {
await Users.getUserName(1);
} catch (e) {
expect(e).toEqual({
error: 'User with 1 not found.',
});
}
});.rejects
.rejects帮助程序就像.resolves帮助程序一样。
如果promise是满足的，测试将自动失败。
import Users from '../lib/user';
jest.mock('../lib/request');
it('tests error with rejects', () => {
expect.assertions(1);
return expect(Users.getUserName(3)).rejects.toEqual({
error: 'User with 3 not found.',
});
});
it('tests error with async/await and rejects', async () => {
expect.assertions(1);
await expect(Users.getUserName(3)).rejects.toEqual({
error: 'User with 3 not found.',
});
});项目实践地址
https://github.com/durban89/webpack4-react16-reactrouter-demo.git
tag：v_1.0.26