[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 ...
随机推荐
- rails的数据库查询方法
rails的数据库查询方法 学习了:http://blog.csdn.net/menxu_work/article/details/8664962 学习了:http://www.cnblogs.com ...
- [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 ...
- Android开发之——编码规范
1. 前言 这份文档参考了 Google Java 编程风格规范和 Google 官方 Android 编码风格规范.该文档仅供参考,只要形成一个统一的风格,见量知其意就可. 2. 源文件基础 2.1 ...
- spark视频教程免费下载
下载地址:点我下载 其它章节陆续上传中,Hadoop视频教程正在整理中,敬请关注.
- unity3d面试题摘选(全)
======================================= 数据结构和算法非常重要.图形学也非常重要! 大的游戏公司非常看重个人基础.综合能力.也有的看重你实际工作能力,看你的De ...
- 51NOD 1686 第K大区间 二分
第k大区间 定义一个区间的值为其众数出现的次数.现给出n个数,求将所有区间的值排序后,第K大的值为多少. Input 第一行两个数n和k(1<=n<=100000,k<=n* ...
- Linux下安装intellij idea
1.下载 http://www.jetbrains.com/idea/download/#section=linux 我下载的是不带jdk的版本 2.放入opt目录中 3.解压到usr下面的intel ...
- intellij idea 运行jedis
到这里下载 http://mvnrepository.com/ jar包! 将jar包放入项目目录中,并引入! 引入包到项目中!创建对象! package com.company; import re ...
- LightOJ--1094-- Farthest Nodes in a Tree(树的直径裸题)
Farthest Nodes in a Tree Time Limit: 2000MS Memory Limit: 32768KB 64bit IO Format: %lld & %llu S ...
- 2017-3-7 leetcode 66 119 121
今天纠结了一整天============================================================== leetcode66 https://leetcode.c ...