React 16 Jest ES6级模拟 - 深入:了解模拟构造函数

简介: 转载地址React 16 Jest ES6级模拟 - 深入:了解模拟构造函数项目初始化git clone https://github.

转载地址

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
目录
相关文章
|
8月前
|
资源调度 前端开发 JavaScript
React的测试:使用Jest和React Testing Library进行深入探索
【4月更文挑战第25天】本文探讨了使用Jest和React Testing Library进行React测试的方法。Jest是Facebook推出的JavaScript测试框架,适合React测试,提供全面的API和功能。React Testing Library侧重于组件行为,提倡按用户交互方式测试。安装这两个工具后,可通过编写测试用例(如模拟点击事件)来验证组件功能。运行Jest可执行测试并显示结果。此外,还介绍了高级测试技巧和模拟功能,强调了它们对于确保组件正确性、提升开发效率的重要性。
|
2月前
|
前端开发 JavaScript 测试技术
React 模拟测试与 Jest
【10月更文挑战第21天】本文介绍了如何使用 Jest 进行 React 组件的单元测试和模拟测试,涵盖了基础概念、常见问题及解决方案,并提供了实践案例。通过学习本文,你将掌握如何有效地使用 Jest 提高代码质量和稳定性。
93 1
|
5月前
|
前端开发 JavaScript 开发者
React 的 ES6 语法与 ES5 相比有何不同?
【8月更文挑战第30天】
72 1
|
7月前
|
前端开发 JavaScript 测试技术
Jest与React Testing Library:前端测试的最佳实践
Jest和React Testing Library是React应用测试的核心工具。安装相关依赖后,在`jest.config.js`中配置Jest。测试时,编写描述性测试用例,使用`render`、`fireEvent`和`screen`来检查组件行为。Jest提供模拟功能,如模拟API调用。测试组件交互性时,模拟用户行为并验证状态变化。确保覆盖边缘情况,使用代码覆盖率报告评估测试完整性,并将测试集成到CI流程中。
116 1
|
8月前
|
JavaScript 前端开发
Vue 或者 React 中,什么情况下会用 Es6 的 Class 类
Vue 或者 React 中,什么情况下会用 Es6 的 Class 类
|
前端开发 JavaScript 测试技术
全网最细:Jest+Enzyme测试React组件(包含交互、DOM、样式测试)
Jest是目前前端工程化下单元测试火热的技术栈,而Enzyme的支持提供了Jest测试React业务、组件的能力,下面来介绍一下React组件测试的一些实际场景。
137 1
|
资源调度 JavaScript 前端开发
react+jest+enzyme配置及编写前端单元测试UT
react+jest+enzyme配置及编写前端单元测试UT
150 0
|
Web App开发 前端开发 JavaScript
大型React项目需要使用ES6解决方案以及对JSX的使用【React高级技术】
大型React项目需要使用ES6解决方案以及对JSX的使用【React高级技术】
|
8月前
|
设计模式 前端开发 数据可视化
【第4期】一文了解React UI 组件库
【第4期】一文了解React UI 组件库
402 0
|
8月前
|
资源调度 前端开发 JavaScript
React 的antd-mobile 组件库,嵌套路由
React 的antd-mobile 组件库,嵌套路由
139 0