[React Testing] Children with Shallow Rendering
When testing React components, we often want to make sure the rendered output of the component matches what we expect. With the React Shallow Renderer, we can check the entire rendered output of a component, the children
prop, or a subset of the children
prop. We can also use 3rd party libraries to check that this element tree includes a specific piece. In this lesson we will walk through examples of each.
import React from 'react';
import expect from 'expect';
import expectJSX from 'expect-jsx';
expect.extend(expectJSX);
import TestUtils from 'react-addons-test-utils';
import LikeCounter from './likeCounter'; describe('like counter', ()=>{ it('should render the like count correctly', ()=>{
const renderer = TestUtils.createRenderer();
renderer.render(<LikeCounter count={5} />);
const actual = renderer.getRenderOutput();
const expected = "Like: 5";
expect(actual).toIncludeJSX(expected);
});
});
[React Testing] Children with Shallow Rendering的更多相关文章
- [React Testing] Intro to Shallow Rendering
In this lesson, we walk through how to use one of React's Test Utilities (from thereact-addons-test- ...
- [React Testing] className with Shallow Rendering
The React Shallow Renderer test utility lets us inspect the output of a component one level deep. In ...
- [React Testing] JSX error diffs -- expect-jsx library
When writing React component tests, it can be hard to decipher the error diffs of broken tests, sinc ...
- 如何使用TDD和React Testing Library构建健壮的React应用程序
如何使用TDD和React Testing Library构建健壮的React应用程序 当我开始学习React时,我努力的一件事就是以一种既有用又直观的方式来测试我的web应用程序. 每次我想测试它时 ...
- React Testing All in One
React Testing All in One React 测试 https://reactjs.org/docs/testing.html jest 26.4 https://jestjs.io/ ...
- [React Testing] Element types with Shallow Rendering
When you render a component with the Shallow Renderer, you have access to the underlying object. We ...
- [React Testing] Conditional className with Shallow Rendering
Often our components have output that shows differently depending on the props it is given; in this ...
- [React & Testing] Simulate Event testing
Here we want to test a toggle button component, when the button was click, state should change, styl ...
- [React & Testing] Snapshot testings
For example we have a React comonent: -- A toggle button, we want to test. When it si toggle on, the ...
随机推荐
- Php GMP
GMP是The GNU MP Bignum Library,是一个开源的数学运算库,它可以用于任意精度的数学运算,包括有符号整数.有理数和浮点数.它本身并没有精度限制,只取决于机器的硬件情况. 本函数 ...
- QT高级运用之粒子模拟(Particle Simulations)
粒⼦模拟是计算机图形技术的可视化图形效果.典型的效果有:落叶,⽕焰,爆炸,流星,云等等.它不同于其它图形渲染, 粒⼦是基于模糊来渲染.它的结果在基于像素下是不可预测的.粒⼦系统的参数描述了随机模拟的边 ...
- 思科27亿美元收购网络安全公司Sourcefire
据国外媒体报道,思科于今日宣布将以27亿美元的总价收购网络安全公司Sourcefire,以加强自身在网络安全业务领域的优势,该交易将于今年下半年完成. [IT商业新闻网讯](记者 张良)7月23日消息 ...
- 关于C++中的虚拟继承的一些总结
1.为什么要引入虚拟继承 虚拟继承是多重继承中特有的概念.虚拟基类是为解决多重继承而出现的.如:类D继承自类B1.B2,而类B1.B2都继承自类A,因此在类D中两次出现类A中的变量和函数.为了节省内存 ...
- ContentProvider URI的组成
ContentProvider URI由哪几部分组成 ContentProvider URI与HTTP URI类似,由以下4部分组成: 1.content:// 相当于HTTP URI中的http ...
- 一些 CSS 框架
利用 CSS 框架,可以简化你的工作,提高工作效率.CSS 框架是一系列 CSS 文件的集合体,包含了基本的元素重置,页面排版.网格布局.表单样式.通用规则等代码块.下面给你推荐了27款优秀的CSS框 ...
- php实现冒泡排序
冒泡排序是非常容易理解和实现,,以从小到大排序举例:设数组长度为N.1.比较相邻的前后二个数据,如果前面数据大于后面的数据,就将二个数据交换.2.这样对数组的第0个数据到N-1个数据进行一次遍历后,最 ...
- Java内部类和外部类的通信探索
1.内部类访问外部类的成员和方法 在内部类中,可以无障碍地访问外部类的所有成员和方法. 在下面的实验代码中,可以看到,内部类sl可以访问外部类的私有成员:sz 和 cur. 同时可以访问私有方法:pr ...
- Nt内核函数原型and中文
NtLoadDriver 服务控制管理器加载设备驱动. NtUnloadDriver 服务控制管理器支持卸载指定的驱动程序. NtRegisterNewDevice 加载新驱动文件. NtQueryI ...
- d010: 分离自然数
内容: 一个三位自然数,分离出它的百位.十位与个位上的数字 输入说明: 一行一个三位整数 输出说明: 一行三个数字 , 空格隔开.分别是百 十 个位数字 输入样例: 256 输出样例 : 2 5 ...