jest

jest:

Jest是由Facebook发布的开源的、基于Jasmine的JavaScript单元测试框架。Jest源于Facebook两年前的构想，用于快速、可靠地测试Web聊天应用。它吸引了公司内部的兴趣，Facebook的一名软件工程师Jeff Morrison半年前又重拾这个项目，改善它的性能，并将其开源。Jest的目标是减少开始测试一个项目所要花费的时间和认知负荷，因此它提供了大部分你需要的现成工具：快速的命令行接口、Mock工具集以及它的自动模块Mock系统。此外，如果你在寻找隔离工具例如Mock库，大部分其它工具将让你在测试中（甚至经常在你的主代码中）写一些不尽如人意的样板代码，以使其生效。Jest与Jasmine框架的区别是在后者之上增加了一些层。最值得注意的是，运行测试时，Jest会自动模拟依赖。Jest自动为每个依赖的模块生成Mock，并默认提供这些Mock，这样就可以很容易地隔离模块的依赖。

通过npm 下载 jest 指令是：

npm install --save-dev jest

也可以通过yan 下载jest 指令是：

yarn add --dev jest

模拟功能

Mock函数允许您通过擦除函数的实际实现，捕获对该函数的调用（以及在这些调用中传递的参数），捕获用实例化的构造函数的实例new以及允许对它们进行测试时配置来测试代码之间的链接。返回值。

有两种模拟函数的方法：通过创建要在测试代码中使用的模拟函数，或编写manual mock来重写模块依赖性。

使用模拟功能

假设我们正在测试一个函数的实现，该函数forEach为提供的数组中的每个项目调用一个回调。

function forEach(items, callback) {
  for (let index = 0; index < items.length; index++) {
    callback(items[index]);
  }
}

为了测试此功能，我们可以使用模拟功能，并检查模拟的状态以确保按预期方式调用回调。

const mockCallback = jest.fn(x => 42 + x);
forEach([0, 1], mockCallback);

// The mock function is called twice
expect(mockCallback.mock.calls.length).toBe(2);

// The first argument of the first call to the function was 0
expect(mockCallback.mock.calls[0][0]).toBe(0);

// The first argument of the second call to the function was 1
expect(mockCallback.mock.calls[1][0]).toBe(1);

// The return value of the first call to the function was 42
expect(mockCallback.mock.results[0].value).toBe(42);

.mock 属性

所有模拟函数都具有此特殊.mock属性，该属性用于保存有关函数调用方式和函数返回内容的数据。该.mock属性还跟踪this每个调用的值，因此也

const myMock = jest.fn();

const a = new myMock();
const b = {};
const bound = myMock.bind(b);
bound();

console.log(myMock.mock.instances);
// > [ 

const myMock = jest.fn();

const a = new myMock();
const b = {};
const bound = myMock.bind(b);
bound();

console.log(myMock.mock.instances);
// > [ <a>, <b> ]

这些模拟成员在断言这些函数如何被调用，实例化或它们返回什么的测试中非常有用：

// The function was called exactly once
expect(someMockFunction.mock.calls.length).toBe(1);

// The first arg of the first call to the function was 'first arg'
expect(someMockFunction.mock.calls[0][0]).toBe('first arg');

// The second arg of the first call to the function was 'second arg'
expect(someMockFunction.mock.calls[0][1]).toBe('second arg');

// The return value of the first call to the function was 'return value'
expect(someMockFunction.mock.results[0].value).toBe('return value');

// This function was instantiated exactly twice
expect(someMockFunction.mock.instances.length).toBe(2);

// The object returned by the first instantiation of this function
// had a `name` property whose value was set to 'test'
expect(someMockFunction.mock.instances[0].name).toEqual('test')

模拟返回值

模拟功能还可用于在测试期间将测试值注入代码中：

const myMock = jest.fn();
console.log(myMock());
// > undefined

myMock
  .mockReturnValueOnce(10)
  .mockReturnValueOnce('x')
  .mockReturnValue(true);

console.log(myMock(), myMock(), myMock(), myMock());
// > 10, 'x', true, true

模拟函数在使用函数连续传递样式的代码中也非常有效。用这种风格编写的代码有助于避免使用复杂的存根来重新创建其所代表的实际组件的行为，从而有利于在使用它们之前将值直接注入测试中。

const filterTestFn = jest.fn();

// Make the mock return `true` for the first call,
// and `false` for the second call
filterTestFn.mockReturnValueOnce(true).mockReturnValueOnce(false);

const result = [11, 12].filter(num => filterTestFn(num));

console.log(result);
// > [11]
console.log(filterTestFn.mock.calls);
// > [ [11], [12] ]

实际上，大多数实际示例都涉及在依赖组件上获取模拟功能并对其进行配置，但是技术是相同的。在这种情况下，请尝试避免在任何未经直接测试的功能内实现逻辑的诱惑。

模拟模块

假设我们有一个从API获取用户的类。该类使用axios调用API，然后返回data包含所有用户的属性：

// users.js
import axios from 'axios';

class Users {
  static all() {
    return axios.get('/users.json').then(resp => resp.data);
  }
}

export default Users;

现在，为了在不实际访问API的情况下测试该方法（从而创建缓慢而脆弱的测试），我们可以使用该jest.mock(...)函数自动模拟axios模块。

一旦对模块进行了模拟，我们就可以提供一个mockResolvedValuefor .get，以返回我们要针对测试进行断言的数据。实际上，我们说的是我们希望axios.get（'/ users.json'）返回假响应。

// users.test.js
import axios from 'axios';
import Users from './users';

jest.mock('axios');

test('should fetch users', () => {
  const users = [{name: 'Bob'}];
  const resp = {data: users};
  axios.get.mockResolvedValue(resp);

  // or you could use the following depending on your use case:
  // axios.get.mockImplementation(() => Promise.resolve(resp))

  return Users.all().then(data => expect(data).toEqual(users));
});

模拟实现

但是，在某些情况下，超越指定返回值的功能并完全替换模拟功能的实现是有用的。这可以通过模拟函数jest.fn或mockImplementationOnce方法来完成。

const myMockFn = jest.fn(cb => cb(null, true));

myMockFn((err, val) => console.log(val));
// > true

mockImplementation当您需要定义从另一个模块创建的模拟函数的默认实现时，该方法很有用：

// 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

当您需要重新创建模拟函数的复杂行为以使多个函数调用产生不同的结果时，请使用以下mockImplementationOnce方法：

const myMockFn = jest
  .fn()
  .mockImplementationOnce(cb => cb(null, true))
  .mockImplementationOnce(cb => cb(null, false));

myMockFn((err, val) => console.log(val));
// > true

myMockFn((err, val) => console.log(val));
// > false

当模拟功能用尽了用定义的实现时mockImplementationOnce，它将执行的默认实现集jest.fn（如果已定义）：

const myMockFn = jest
  .fn(() => 'default')
  .mockImplementationOnce(() => 'first call')
  .mockImplementationOnce(() => 'second call');

console.log(myMockFn(), myMockFn(), myMockFn(), myMockFn());
// > 'first call', 'second call', 'default', 'default'

对于通常具有链式方法（因此总是需要返回this）的情况，我们提供了一个含糖的API以简化.mockReturnThis()函数的形式简化此过程，该函数也位于所有模拟中：

const myObj = {
  myMethod: jest.fn().mockReturnThis(),
};

// is the same as

const otherObj = {
  myMethod: jest.fn(function() {
    return this;
  }),
};

模拟名称

您可以选择为模拟函数提供一个名称，该名称将在测试错误输出中显示，而不是显示“ jest.fn（）”。如果您希望能够快速识别在测试输出中报告错误的模拟功能，请使用此功能。

const myMockFn = jest
  .fn()
  .mockReturnValue('default')
  .mockImplementation(scalar => 42 + scalar)
  .mockName('add42');

自定义匹配器

最后，为了减少对如何调用模拟函数的要求，我们为您添加了一些自定义匹配器函数：

// The mock function was called at least once
expect(mockFunc).toHaveBeenCalled();

// The mock function was called at least once with the specified args
expect(mockFunc).toHaveBeenCalledWith(arg1, arg2);

// The last call to the mock function was called with the specified args
expect(mockFunc).toHaveBeenLastCalledWith(arg1, arg2);

// All calls and the name of the mock is written as a snapshot
expect(mockFunc).toMatchSnapshot();

这些匹配器是用于检查.mock财产的常见形式的糖。如果这更符合您的口味，或者您需要执行更具体的操作，则始终可以自己手动执行此操作：

// The mock function was called at least once
expect(mockFunc.mock.calls.length).toBeGreaterThan(0);

// The mock function was called at least once with the specified args
expect(mockFunc.mock.calls).toContainEqual([arg1, arg2]);

// The last call to the mock function was called with the specified args
expect(mockFunc.mock.calls[mockFunc.mock.calls.length - 1]).toEqual([
  arg1,
  arg2,
]);

// The first arg of the last call to the mock function was `42`
// (note that there is no sugar helper for this specific of an assertion)
expect(mockFunc.mock.calls[mockFunc.mock.calls.length - 1][0]).toBe(42);

// A snapshot will check that a mock was invoked the same number of times,
// in the same order, with the same arguments. It will also assert on the name.
expect(mockFunc.mock.calls).toEqual([[arg1, arg2]]);
expect(mockFunc.getMockName()).toBe('a mock name');

Dom 操作：


通常认为很难测试的另一类功能是直接操作DOM的代码。让我们看看如何测试下面的jQuery代码片段，以侦听click事件，异步获取一些数据并设置span的内容。

// displayUser.js
'use strict';

const $ = require('jquery');
const fetchCurrentUser = require('./fetchCurrentUser.js');

$('#button').click(() => {
  fetchCurrentUser(user => {
    const loggedText = 'Logged ' + (user.loggedIn ? 'In' : 'Out');
    $('#username').text(user.fullName + ' - ' + loggedText);
  });
});

同样，我们在__tests__/文件夹中创建一个测试文件：

// __tests__/displayUser-test.js
'use strict';

jest.mock('../fetchCurrentUser');

test('displays a user after a click', () => {
  // Set up our document body
  document.body.innerHTML =
    '<div>' +
    '  <span id="username" />' +
    '  <button id="button" />' +
    '</div>';

  // This module has a side-effect
  require('../displayUser');

  const $ = require('jquery');
  const fetchCurrentUser = require('../fetchCurrentUser');

  // Tell the fetchCurrentUser mock function to automatically invoke
  // its callback with some data
  fetchCurrentUser.mockImplementation(cb => {
    cb({
      fullName: 'Johnny Cash',
      loggedIn: true,
    });
  });

  // Use jquery to emulate a click on our button
  $('#button').click();

  // Assert that the fetchCurrentUser function was called, and that the
  // #username span's inner text was updated as we'd expect it to.
  expect(fetchCurrentUser).toBeCalled();
  expect($('#username').text()).toEqual('Johnny Cash - Logged In');
});