React 16 Jest ES6级模拟 - 深入：了解模拟构造函数
source link: https://www.gowhich.com/blog/863?amp%3Butm_medium=referral
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
项目初始化
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
Recommend
-
42
一、前言 构造函数缺失漏洞自智能合约产生以来就一直出现，归根到底是由于新进开发者对 solidity 代码结构不熟悉造成的。BUGX.IO团队本次就来介绍一下漏洞的基本原理、表现形式以及对开发者的建议。
-
42
重要说明 本文中提到的构造函数，在很多书中有其他的说法，如构造器，构造方法，初始化，初始函数等 本文中提到的析构函数，在很多书中有其他的说法，如反构造器，析构方法，反初始化，反初始函...
-
55
引言 前端进阶系列已经到第 5 期啦，本期正式开始原型 Prototype 系列。 本篇文章重点介绍构造函数、原型和原型链相关知识，如果你还不知道 Symbol 是不是构造函数、constructor 属性是否只读、prototype 、[[Prototype
-
30
我们上次提到主构造函数是 2014 年，当时， C# 6 和 VB 12 的候选列表上 去掉了
-
26
JavaScript 构造函数的继承 在上一篇 文章 中讲述了 JS 对象、构造函数以及原型模式，这篇文章来讨论下 JavaScript 的继承 继承是 OO 语言中的一个最为人津津乐道的概念。许多 OO 语言都支持两种继承方式：接口继承和...
-
20
JS里一切皆对象，对象是“无序属性的集合，其属性值可以是数据或函数”。 事实上，所有的对象都是由函数创建的，而常见的对象字面量则只是一种语法糖： // let user = {name: 'paykan', age: 29} ，等同于： let user =...
-
25
众所周知，在java里是不能给构造函数写返回值的，如果在低版本的编译器定义一个构造器写上返回值可能会报错，高版本里面他就是一个普通的方法。可是如果构造函数没有返回值，那么比如Test t = new Test()我们new一个对象的时候是怎么赋值...
-
19
前言：之前一直存在一个理解误区，以为C++中的 vector 存在一个构造函数可以为...
-
17
构造器和操作符 "new" 常规的 {...} 语法允许创建一个对象。但是我们经常需要创建许多类似的对象，例如多个用户或菜单项等。 这可以使用构造函数和 "new" 操作符来实现。 构...
-
7
人工构造Flask session模拟cookie登陆 Posted 2021-12-08 | stdout 有没有好奇为什么 Flask 配置必须要求一个 SECRET_KEY，然后就可以在浏...
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK