React 16 Jest ES6级模拟之模拟构造函数的深入了解
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
上一篇: php多用户读写文件冲突的解决办法
下一篇: Maven入门【小白千万别点进】