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语法的类(这也是另一个函数)。

所以可以使用模拟函数来模拟它们。如下

深入：了解模拟构造函数

使用jest.fn().mockimplementation()构建的构造函数mock，使模拟看起来比实际更复杂。

那么jest是如何创建一个简单的模拟(simple mocks)并演示下mocking是如何起作用的

手动模拟另一个es6语法的类

如果使用与__mocks__文件夹中的模拟类相同的文件名定义es6语法的类，则它将用作模拟。

这个类将用于代替真正的类。

我们可以为这个类注入测试实现，但不提供监视调用的方法。如下

src/__mocks__/sound-player.js

export default class soundplayer {
 constructor() {
  console.log('mock soundplayer: constructor was called');
  this.name = 'player1';
  this.filename = '';
 }

 choiceplaysoundfile(filename) {
  console.log('mock soundplayer: choiceplaysoundfile was called');
  this.filename = filename;
 }

 playsoundfile() {
  console.log('mock soundplayer: playsoundfile was called');
  console.log('播放的文件是:', this.filename);
 }
}

使用模块工厂参数的简单模拟(simple mock using module factory parameter)

传递给jest.mock(path，modulefactory)的模块工厂函数可以是返回函数*的高阶函数（hof）。

这将允许在模拟上调用new。

同样，这允许为测试注入不同的行为，但不提供监视调用的方法

*模块工厂功能必须返回一个功能(* module factory function must return a function)

为了模拟构造函数，模块工厂必须返回构造函数。

换句话说，模块工厂必须是返回函数的函数 - 高阶函数（hof）。如下演示

jest.mock('../lib/sound-player', () => {
 return function() {
  return {
   playsoundfile: () => {}
  };
 };
});

注意：箭头功能不起作用(note: arrow functions won't work)

请注意，mock不能是箭头函数，因为在javascript中不允许在箭头函数上调用new。

所以这不起作用：

jest.mock('./sound-player', () => {
 return () => {
  // 不起作用 箭头函数不会被调用
  return {playsoundfile: () => {}};
 };
});

这将抛出typeerror：_soundplayer2.default不是构造函数，除非代码被转换为es5，例如，

通过babel-preset-env。（es5没有箭头函数也没有类，因此两者都将被转换为普通函数。）

实践项目地址

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