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')));

运行测试，正常通过测试，如果问题可加群沟通