[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-utils
package) called "Shallow Rendering". This lets us render our React component one level deep - without a DOM - so that we can write tests for it. It works kind of like ReactDOM.render, where the shallow renderer is a temporary place to "hold" your rendered component so that you can assert things about its output. Tests written using the shallow renderer are great for stateless or "dumb" components that simply have their props passed to them from a parent container or "smart" component. These shallow renderer tests work especially well with stateless function components. They also work well for "unit" tests where you want to make sure your code works in isolation.
_NOTE: The React team has recommended composing the majority of your apps using these stateless "dumb" components, so the majority of lessons in this course will focus on writing simple unit tests for these stateless components using Shallow Rendering. If you also want to write tests for the stateful components that are tied to different components and state and can't be tested in isolation, you may want to look at using a DOM (with something like Karma or jsdom) and React's other test utilities like renderIntoDocument and Simulate. However, I've found that it is helpful to try to compose most of your project with simple, isolated, stateless or "pure" components that can be unit tested with Shallow Rendering, and then wrap these components with a few stateful or "impure" components that you can either not worry about testing (what I do most of the time because it is difficult to test stateful components), or write separate integration and functional tests for them using different tools.
import React from 'react';
import expect from 'expect';
import TestUtils from 'react-addons-test-utils'; const CoolComponent = ({greeting}) => {
return (
<div>
<h1>Greeting</h1>
<div>{greeting}</div>
</div>
);
}; describe('CoolComponent', ()=>{ it('should ...', ()=>{
//Shallow Rendering
const renderer = TestUtils.createRenderer(); renderer.render(<CoolComponent greeting='hello world' />);
const output = renderer.getRenderOutput(); console.log(output);
});
});
It outputs:
{ '$$typeof': Symbol(react.element),
type: 'div',
key: null,
ref: null,
props: { children: [ [Object], [Object] ] },
_owner:
{ _currentElement:
{ '$$typeof': Symbol(react.element),
type: [Function: CoolComponent],
key: null,
ref: null,
props: [Object],
_owner: null,
_store: {} },
_rootNodeID: '.atjgairf9c',
_instance:
StatelessComponent {
props: [Object],
context: {},
refs: {},
updater: [Object],
_reactInternalInstance: [Circular],
state: null },
_pendingElement: null,
_pendingStateQueue: null,
_pendingReplaceState: false,
_pendingForceUpdate: false,
_renderedComponent: { _renderedOutput: [Circular], _currentElement: [Circular] },
_context: {},
_mountOrder: 1,
_topLevelWrapper: null,
_pendingCallbacks: null },
_store: {} }
[React Testing] Intro to Shallow Rendering的更多相关文章
- [React Testing] Children with Shallow Rendering
When testing React components, we often want to make sure the rendered output of the component match ...
- [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] Setting up dependencies && Running tests
To write tests for our React code, we need to first install some libraries for running tests and wri ...
- [React & Testing] Simulate Event testing
Here we want to test a toggle button component, when the button was click, state should change, styl ...
随机推荐
- Asp服务器控件(HyperLink、Button) 绑定后台参数 DataBinder.Eval
HyperLink动态绑定参数 <asp:HyperLink id="MbCenterHLnk" runat="server" Text='会员中心' T ...
- PHP XML Parser
安装 XML Parser 函数是 PHP 核心的组成部分.无需安装即可使用这些函数. PHP XML Parser 函数 PHP:指示支持该函数的最早的 PHP 版本. 函数 描述 PHP utf8 ...
- 重复造轮子感悟 – XLinq性能提升心得
曾经的两座大山 1.EF 刚接触linq那段时间,感觉这家伙好神奇,语法好优美,好厉害.后来经历了EF一些不如意的地方,就想去弥补,既然想弥补,就必须去了解原理.最开始甚至很长一段时间都搞不懂IQue ...
- java事件处理4(焦点,键盘
FocusEvent焦点事件 接口 addFocusListener(FocusListener listener) 有两个方法 public void focusGains(FocusEvent e ...
- PHPCMSV9 更换域名后,要做的操作
修改/caches/configs/system.php里面所有和域名有关的,把以前的老域名修改为新域名. 进入后台设置-->站点管理,对相应的站点的域名修改为新域名. 点击后台右上角的&quo ...
- Nginx源码研究三:Epoll在NGINX中的使用
Web服务器在面对高并发的情况下,网络的IO一般选择IO复用,像apache选择的Select/poll.Nginx在linux 2.6后选择Epoll做网路IO,提高了WEB服务的并发能力. 在本章 ...
- 一个使用CSocket类的网络通信实例
http://www.cppblog.com/changshoumeng/archive/2010/05/14/115413.html 3.8 一个使用CSocket类的网络通信实例 本例采用CSoc ...
- php过滤参数特殊字符防注入
分享一例php实现过滤提交的参数数据以防止注入的代码,有需要的朋友参考下. 本节内容: php过滤特符字符,php防注入. in: 后端程序 例子: 代码示例: <?php /** * 安全防范 ...
- 06 - 从Algorithm 算法派生类中删除ExecuteInformation() 和ExecuteData() VTK 6.0 迁移
在先前的vtk中,如vtkPointSetAlgorithm 等算法派生类中定义了虚方法:ExecuteInformation() 和 ExecuteData().这些方法的定义是为了平稳的从VTK4 ...
- Android利用百度地图定位
百度地图照着百度的教程做的总是出现报错 请帮我看看错误在那 2013-12-13 15:16168海军 | 分类:百度地图 | 浏览1252次 java.lang.RuntimeException: ...