react 项目 测试
Enzyme 来自 airbnb 公司,是一个用于 React 的 JavaScript 测试工具,方便你判断、操纵和历遍 React Components 输出。Enzyme 的 API 通过模仿 jQuery 的 API ,使得 DOM 操作和历遍很灵活、直观。Enzyme 兼容所有的主要测试运行器和判断库。
jest.spyOn : 当需要测试某些必须被完整执行的方法时,常常需要使用jest.spyOn()
1) 如果是箭头函数的定义
// react 组件中的一部分代码
test = () => {}
测试用例中mock此函数 方法如下
const wrapper = mount(<Component />);
const spyTest = jest.spyOn(wrapper.instance(), 'test'); // 在mount组件之后
// mock 完成后可以被调用
spyTest();
- 如果是bind 绑定的函数
test() {}
测试用例中mock此函数 方法如下
const spyTest = jest.spyOn(Component.prototype, 'test'); //在mount组件之前
mount(<Component />)
// mock 完成后可以被调用
spyTest();
antd form 设计到必填项时候mock方式如下
wrapper.find('input#id').simulate('change', {target: {value: 'test'}});
react 项目 测试的更多相关文章
- 创建react项目的几种方法
前言: 构建React项目的几种方式: 构建:create-react-app 快速脚手架 构建:generator-react-webpack 构建:webpack一步一步构建 1)构建:creat ...
- 创建react项目
npm搭建React项目 React官网提供最简便的方法是使用create-react-app npx create-react-app my-app cd my-app npm start 也可以自 ...
- 使用 webpack 搭建 React 项目
简评:相信很多开发者在入门 react 的时候都是使用 create-react-app 或 react-slingshot 这些脚手架来快速创建应用,当有特殊需求,需要修改 eject 出来的 we ...
- 简述--构建React项目的几种方式
前言: 构建React项目的几种方式: 构建:create-react-app 快速脚手架 构建:generator-react-webpack 构建:webpack一步一步构建 1)构建:creat ...
- 从零开始搭建一个react项目
Nav logo 120 发现 关注 消息 4 搜索 从零开始搭建一个react项目 96 瘦人假噜噜 2017.04.23 23:29* 字数 6330 阅读 32892评论 31喜欢 36 项目地 ...
- 优雅的在React项目中使用Redux
概念 首先我们会用到哪些框架和工具呢? React UI框架 Redux 状态管理工具,与React没有任何关系,其他UI框架也可以使用Redux react-redux React插件,作用:方便在 ...
- DvaJS构建配置React项目与使用
DvaJS构建配置React项目与使用 一,介绍与需求分析 1.1,介绍 dva 首先是一个基于redux 和redux-saga的数据流方案,然后为了简化开发体验,dva 还额外内置了react-r ...
- React项目使用Redux
⒈创建React项目 初始化一个React项目(TypeScript环境) ⒉React集成React-Router React项目使用React-Router ⒊React集成Redux Redux ...
- react项目使用antd
在开始实践之前要确保搭建React单页面开发环境,如果还没有搭建好开发环境的朋友请移步到如何搭建React单页面开发环境. 首先在命令行模式下创建一个React项目(项目名使用小写字母命名):(win ...
随机推荐
- mongodb 配置文件解释(转)
Mongodb 3.x配置说明,本文内容忽略了Enterprise版和一些不常用的配置. 一.配置说明 在Mongod安装包中,包含2个进程启动文件:mongod和mongos:其中mongd是核心基 ...
- 第3章 JDK并发包(三)
3.2 线程复用:线程池 一种最为简单的线程创建和回收的方法类似如下代码: new Thread(new Runnable() { @Override public void run() { // d ...
- 《Head first设计模式》之策略模式
策略模式定义了算法族,分别封装起来,让它们之间可以互相替换,此模式让算法的变化独立于使用算法的客户. 假设有一个模拟鸭子的游戏,游戏中会出现各种鸭子,一边游泳戏水,一边呱呱叫.这个游戏的内部设计了一个 ...
- 12-MyBatis02
今日知识 1. 关联查询 2. 延时加载 3. 查询缓存 关联查询 1.一对一 resultType实现 1. 写个定单的扩展类 public class OrdersExt extends Orde ...
- javascript 客户端webSocket示例
//html <script> // 初始化一个 WebSocket 对象 var ws = new WebSocket("ws://localhost:9998/echo&qu ...
- php面试笔记(4)-php基础知识-流程控制
本文是根据慕课网Jason老师的课程进行的PHP面试知识点总结和升华,如有侵权请联系我进行删除,email:guoyugygy@163.com 在面试中,考官往往喜欢基础扎实的面试者,而流程控制相关的 ...
- Angular解析json
一. 解析本地Json数据并展示(待定) 1. 创建服务{ 创建一个接口对象用于接收Json数据 通过HttpClient获得本地Json文件 } 2. 组件中引入服务调用服务方法拿文件用subscr ...
- VMware克隆Linux虚拟机报错
在VMware里克隆了2个centos6.5,执行命令重启网卡服务报以下错误: Bringing up interface eth0: Device eth0 does not seem to be ...
- java设计模式学习笔记——里氏替换原则
oo中的继承性的思考和说明 1.继承包含这样一层含义:父类中凡是已经实现好的方法,实际上是在设定规范和契约,虽然它不强制要求所有的子类必须遵循这些七月,但是如果子类对这些已经实现的方法任意修改,就会对 ...
- JS中this的几种情况
1.给元素的某个事件行为绑定方法,事件触发,方法执行,此时方法中的this一般都是当前元素本身: <div id="div"></div> div.oncl ...