转载地址

React 16 Jest ES6级模拟 - 监视并监视模拟情况

项目初始化

git clone https://github.com/durban89/webpack4-react16-reactrouter-demo.git 
cd webpack4-react16-reactrouter-demo
git fetch origin
git checkout v_1.0.32
npm install

ES6 Class Mocks(使用ES6语法类的模拟)

Jest可用于模拟导入到要测试的文件中的ES6语法的类。

ES6语法的类是具有一些语法糖的构造函数。因此，ES6语法的类的任何模拟都必须是函数或实际的ES6语法的类(这也是另一个函数)。
所以可以使用模拟函数来模拟它们。如下

跟踪使用情况（监视模拟）(Keeping track of usage (spying on the mock))

注入测试实现很有帮助，但我们可能还想测试是否使用正确的参数调用类构造函数和方法。

监视构造函数(Spying on the constructor)

为了跟踪对构造函数的调用，用一个Jest模拟函数替换HOF返回的函数。
使用jest.fn()创建它，然后使用mockImplementation()指定它的实现。如下

import SoundPlayer from '../lib/sound-player';
jest.mock('../lib/sound-player', () => {
  // 检查构造函数的调用
  return jest.fn().mockImplementation(() => {
    return {
      choicePlaySoundFile: () => {},
      playSoundFile: () => {},
    };
  });
});

我们使用SoundPlayer.mock.calls来检查我们的模拟类的用法：expect(SoundPlayer).toHaveBeenCalled();
或接近等价的：expect(SoundPlayer.mock.calls.length).toEqual(1);

监视类的方法(Spying on methods of our class)

我们的模拟类需要提供将在测试期间调用的任何成员函数(示例中为playSoundFile)，否则我们将因调用不存在的函数而出错。
但是我们可能也希望监视对这些方法的调用，以确保使用预期的参数调用它们。

每次在测试期间调用模拟构造函数时，都会创建一个新对象。
为了监视所有这些对象中的方法调用，我们使用另一个mock函数填充playSoundFile，并在我们的测试文件中存储对同一个mock函数的引用，因此它在测试期间可用。

import SoundPlayer from '../lib/sound-player';
const mockPlaySoundFile = jest.fn();
const mockChoicePlaySoundFile = jest.fn();
jest.mock('../lib/sound-player', () => {
  return jest.fn().mockImplementation(() => {
    return {
      choicePlaySoundFile: mockChoicePlaySoundFile,
      playSoundFile: mockPlaySoundFile,
    };
  });
});

手动模拟等效于此：

export const mockChoicePlaySoundFile = jest.fn();
const mockPlaySoundFile = jest.fn();

const mock = jest.fn().mockImplementation(() => {
  const data = {
    choicePlaySoundFile: mockChoicePlaySoundFile,
    playSoundFile: mockPlaySoundFile,
  };

  return data;
});

export default mock;

用法类似于模块工厂函数，除了可以省略jest.mock()中的第二个参数，并且必须将模拟方法导入到测试文件中，因为它不再在那里定义。
使用原始模块路径;
不包括__mocks__

在测试之间进行清理(Cleaning up between tests)

要清除对mock构造函数及其方法的调用记录，我们在beforeEach()函数中调用mockClear()：

前面的文章分别做了4个实例,分别是下面四个文件,可以自己打开项目去具体看下，这里就不在展示了

src/__tests/jest_sound_player.test.js
src/__tests/jest_sound_player_2.test.js
src/__tests/jest_sound_player_3.test.js
src/__tests/jest_sound_player_4.test.js

实践项目地址

git clone https://github.com/durban89/webpack4-react16-reactrouter-demo.git
git checkout v_1.0.32