使用Jest进行Javascript单元测试

比如在实际项目中，经常会有这种代码之间的引用存在。

// fooBar.js
export const getFooResult = () => {
  // foo logic here
};
export const getBarResult = () => {
  // bar logic here
};

// caculate.js
import { getFooResult, getBarResult } from './math';

export const getFooBarResult = () => getFooResult() + getBarResult();

此时，getFooResult() 和 getBarResult() 就是 getFooBarResult 这个函数的依赖。如果我们关注的点是 getFooBarResult 这个函数，我们就应该把 getFooResult 和 getBarResult Mock 掉，剥离这种依赖。下面是一个使用 Jest 进行 Mock 的例子。

// calculate.test.js
import { getFooBarResult } from './calculate';
import * as fooBar from './math';

test('getResult should return result getFooResult() + getBarResult()', () => {
  // mock add方法和multiple方法
  fooBar.getFooBarResult = jest.fn(() => 10);
  fooBar.getBarResult = jest.fn(() => 5);

  const result = getResult();

  expect(result).toEqual(15);
});

在上面的例子中，我们关注的逻辑是 getFooBarResult()这个函数中 getFooResult() + getBarResult()这段相加的逻辑，进行 Mock 之后我们能很好的进行独立的单元测试。

当然，Jest 也支持 Mock 技术中的 Spy。

// calculate.test.js
import { getFooBarResult } from './calculate';
import * as fooBar from './math';

test('getResult should return result getFooResult() + getBarResult()', () => {
  // mock add方法和multiple方法
  fooBar.getFooBarResult = jest.fn(() => 10);
  fooBar.getBarResult = jest.fn(() => 5);

  const result = getResult();

  // 监控getFooResult和getBarResult的调用情况.
  expect(fooBar.getFooResult).toHaveBeenCalled(1);
  expect(fooBar.getBarResult).toHaveBeenCalled(1);
});

对于使用 export default foo 或者 module.exports语法的模块导出，我们可以使用mockImplementation进行 mock。

// foo.js
module.exports = function () {
  // some implementation;
};

// test.js
jest.mock('../foo'); // this happens automatically with automocking
const foo = require('../foo');

// foo is a mock function
foo.mockImplementation(() => 42);
foo();
// > 42

Jest 中关于 Mock 还有很多用法，感兴趣的可以仔细阅读一下官方文档。

jest-Mock-Functions

异步代码

在实际应用中, js 有很大一部分的交互是异步的交互，因此，如何方便的测试异步代码也是  很需要考量的一个地方。

// request.js
const http = require('http');

export default function request(url) {
  return new Promise((resolve) => {
    // This is an example of an http request, for example to fetch
    // user data from an API.
    // This module is being mocked in __mocks__/request.js
    http.get({ path: url }, (response) => {
      let data = '';
      response.on('data', (_data) => (data += _data));
      response.on('end', () => resolve(data));
    });
  });
}

在测试 request 这个函数时，我们实际上并不想去真正的发送网络请求，我们需要做的只是验证我们的 get call 发出去了，并且在我们做出了对于对应 response 正确的响应。

// __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(() =>
      users[userID]
        ? resolve(users[userID])
        : reject({
            error: 'User with ' + userID + ' not found.',
          })
    );
  });
}

我们创建了这样一个 mock 文件，该文件指明了 request 的 mock。

// __tests__/user-test.js
jest.mock('../request');

import * as user from '../user';

// The assertion for a promise must be returned.
it('works with promises', () => {
  expect.assertions(1);
  return user.getUserName(4).then((data) => expect(data).toEqual('Mark'));
});

it('works with resolves', () => {
  expect.assertions(1);
  return expect(user.getUserName(5)).resolves.toEqual('Paul');
});

在  测试文件中，我们手动调用jest.mock来告诉 Jest 我们不需要 automock, 而是使用我们创建的 mock 文件。

关于更多异步代码的测试，请查阅官方文档

Async-code testing

总结

Jest 是一套很强大的开箱即用的测试套件，其中的用法丰富多变，本文涉及的只是很基础很简单的一部分，如果有更多的需求，我也鼓励大家更多去阅读官方的文档。

参考

Jest 官方文档

https://juejin.im/post/597aa518f265da3e345f3262