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的更多相关文章

  1. [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 ...

  2. [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 ...

  3. 转载 React.createClass 对决 extends React.Component

    先给出结论,这其实是殊途同归的两种方式.过去我们一般都会使用 React.createClass 方法来创建组件,但基于 ES6 的小小语法糖,我们还可以通过 extends React.Compon ...

  4. [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 ...

  5. [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 ...

  6. [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 ...

  7. 【react学习】关于react框架使用的一些细节要点的思考

    ( _(:3 」∠)_给园友们提个建议,无论是API文档还是书籍,一定要多看几遍!特别是隔一段时间后,会有意想不到的收获的)   这篇文章主要是写关于学习react中的一些自己的思考:   1.set ...

  8. React Native 系列(二) -- React入门知识

    前言 本系列是基于React Native版本号0.44.3写的,最初学习React Native的时候,完全没有接触过React和JS,本文的目的是为了给那些JS和React小白提供一个快速入门,让 ...

  9. React-Native(三):React Native是基于React设计的

    React Native是基于React js设计的. 参考:<React 入门实例教程> React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript ...

随机推荐

  1. Spring MVC学习------------核心类与接口

    核心类与接口: 先来了解一下,几个重要的接口与类. 如今不知道他们是干什么的没关系,先混个脸熟,为以后认识他们打个基础. DispatcherServlet   -- 前置控制器 HandlerMap ...

  2. UI设计师不可不知的安卓屏幕知识-安卓100分享

    http://www.android100.org/html/201505/24/149342.html UI设计师不可不知的安卓屏幕知识-安卓100分享 不少设计师和工程师都被安卓设备纷繁的屏幕搞得 ...

  3. VC 6.0中添加库文件和头文件 【转】

    本文转载自:http://blog.sina.com.cn/s/blog_9d3971af0102wxjq.html 加头文件包含 VC6.0中: VC6.0默认include包含路径:Tools&g ...

  4. 0x17 二叉堆

    优先队列太好用了手写啥呀 poj1456 经过贪心专题的洗礼以后这题根本就不叫题啊...按时间大到小排每次取最大就好 #include<cstdio> #include<iostre ...

  5. 这里是指推送通知跟NSNotification有区别:

    1.NSNotification是系统内部发出通知,一般用于内部事件的监听,或者状态的改变等等,是不可见的2.本地通知与远程通知是可见的,主要用于告知用户或者发送一些App的内容更新,推送一些相关的消 ...

  6. BZOJ 2957 分块

    思路: 记录每栋楼楼顶与原点连线的斜率 那么一栋楼可见当且仅当前面所有楼的斜率都小于这栋楼 将n栋楼分为√(0.5*n*logn)块 每一块内维护一个单调上升子序列(注意不是LCS) 比如说4 1 2 ...

  7. github结合TortoiseGit使用sshkey,无需每次输入账号和密码

    首先需要明确,github上支持三种方式进行项目的clone    https,ssh,subversion ssh的方式 git@github.com:用户名/版本库t.git            ...

  8. centos 部署 .net core runtime 环境

    除非在linux下开发才安装SDK,一般生产环境只需安装 runtime 1.添加 yum 源 sudo rpm --import https://packages.microsoft.com/key ...

  9. 备份IIS

    备份IIS,这里实质指的是备份IIS配置.如果要备份IIS部署的网站的话,直接Copy目录就行了. 备份IIS配置其实和备份系统含义差不多,为了方便系统或者IIS出现故障后能够及时恢复到某节点上,所以 ...

  10. Windows下Java JDK安装和环境变量配置

    [Java攻城狮学习路线](http://www.cnblogs.com/apollospotatolikett/p/8665123.html 1.JDK下载 下载地址:http://www.orac ...