[React] Integration test a React component that consumes a Render Prop
In this lesson, I use Enzyme and Jest's Snapshot functionality to write an integration test for a component called CounterConsumer that consumes the Render Prop component Counter. This integration test is great because it doesn't necessarily care that CounterConsumer uses Counter behind the scenes, just that it works when integrated.
import React from "react";
import Counter from "./Counter"; export default function CounterConsumer({ initial }) {
return (
<Counter initial={initial}>
{({ increment, decrement, counter }) => (
<div className="content" style={{ textAlign: "center" }}>
<h1>{counter}</h1>
<button className="button is-success" onClick={increment}>
Increment
</button>
<button className="button is-danger" onClick={decrement}>
Decrement
</button>
</div>
)}
</Counter>
);
}
test:
import React from "react";
import ReactDOM from "react-dom";
import toJSON from "enzyme-to-json";
import { mount } from "enzyme";
import "./enzymeSetup";
import CounterConsumer from "./CounterConsumer"; it("accepts an initial value", () => {
const wrapper = mount(<CounterConsumer initial={} />);
expect(toJSON(wrapper)).toMatchSnapshot();
}); it("increments counter", () => {
const wrapper = mount(<CounterConsumer />);
wrapper
.find("button")
.at()
.simulate("click"); expect(toJSON(wrapper)).toMatchSnapshot();
}); it("decrements counter", () => {
const wrapper = mount(<CounterConsumer />);
wrapper
.find("button")
.at()
.simulate("click"); expect(toJSON(wrapper)).toMatchSnapshot();
});
[React] Integration test a React component that consumes a Render Prop的更多相关文章
- [React + Mobx] Mobx and React intro: syncing the UI with the app state using observable and observer
Applications are driven by state. Many things, like the user interface, should always be consistent ...
- [React] Unit test a React Render Prop component
In this lesson, I use Enzyme and Jest to unit test a Counter Render Prop component. Writing integrat ...
- 转载 React.createClass 对决 extends React.Component
先给出结论,这其实是殊途同归的两种方式.过去我们一般都会使用 React.createClass 方法来创建组件,但基于 ES6 的小小语法糖,我们还可以通过 extends React.Compon ...
- [React] Use React.memo with a Function Component to get PureComponent Behavior
A new Higher Order Component (HOC) was recently released in React v16.6.0 called React.memo. This be ...
- [React Router] Create a ProtectedRoute Component in React Router (setState callback to force update)
In this lesson we'll create a protected route just for logged in users. We'll combine a Route with a ...
- [React] Implement a Higher Order Component with Render Props
When making a reusable component, you'll find that people often like to have the API they're most fa ...
- 【react学习】关于react框架使用的一些细节要点的思考
( _(:3 」∠)_给园友们提个建议,无论是API文档还是书籍,一定要多看几遍!特别是隔一段时间后,会有意想不到的收获的) 这篇文章主要是写关于学习react中的一些自己的思考: 1.set ...
- React Native 系列(二) -- React入门知识
前言 本系列是基于React Native版本号0.44.3写的,最初学习React Native的时候,完全没有接触过React和JS,本文的目的是为了给那些JS和React小白提供一个快速入门,让 ...
- React-Native(三):React Native是基于React设计的
React Native是基于React js设计的. 参考:<React 入门实例教程> React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript ...
随机推荐
- STL_算法_依据第n个元素排序(nth_element)
C++ Primer 学习中... 简单记录下我的学习过程 (代码为主) //全部容器适用 nth_element(b,n,e) nth_element(b,n,e,p) 对照:partition() ...
- 具体验证身份证号码规则和姓名(汉字)的java代码
一.验证汉字的正則表達式 /** 是否是汉字的正则 */ private String regexIsHanZi = "[\\u4e00-\\u9fa5]+"; * @pa ...
- Boost库编译后命名方式
Boost官网的<Geting Started On Windows>(http://www.boost.org/doc/libs/1_38_0/more/getting_started/ ...
- HTML5游戏实战之20行代码实现打地鼠
之前写过一篇打地鼠的博客70行的代码实现打地鼠游戏,细致思考过后,发现70行代码都有点多余了,应用tangide的控件特性,能够将代码量缩减到20行左右. 先show一下终于成果,点击试玩:打地鼠.或 ...
- gridview in webform
How to: Enable Default Paging in the GridView Web Server Control https://msdn.microsoft.com/en-us/li ...
- ES等待任务——是master节点上的task任务
等待中的任务编辑 有一些任务只能由主节点去处理,比如创建一个新的 索引或者在集群中移动分片.由于一个集群中只能有一个主节点,所以只有这一节点可以处理集群级别的元数据变动.在 99.9999% 的时间里 ...
- 完整注册+JQuery验证+selert后台校验
Java代码 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8 ...
- Spark RDD概念学习系列之不同角度看RDD
不多说,直接上干货!
- rmi 工作原理
rmi 工作原理 (转) 工作SocketJava应用服务器网络应用 RMI(Remote Method Invocation,远程方法调用)是Java的一组拥护开发分布式应用程序的API.RMI使 ...
- PHP学习过程中遇到的疑难杂症
变量当双引号中包含变量时,变量会与双引号中的内容连接在一起:当单引号中包含变量时,变量会被当做字符串输出. Heredoc结构形式首先使用定界符表示字符串(<<<),接着在“< ...