[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中的diff算法,通俗易懂的解读
- React报错之Expected `onClick` listener to be a function
- react路由跳转
- 滴滴前端高频react面试题总结
- 带你彻底读懂React VDOM DIFF
- React源码学习入门(五)详解React中的Transaction事务机制
- 问:React的setState为什么是异步的?
- 带你实现react源码的核心功能
- React + Springboot + Quartz,从0实现Excel报表自动化
- 你需要的react面试高频考察点总结
- React的Context源码是怎么实现的
- React Context源码解读
- 前端框架_React知识点精讲
- React源码解读--更新的创建
- react源码分析:深度理解React.Context
- React源码分析4-深度理解diff算法5
- React源码分析6-hooks源码6
- React 学习笔记,从入门到精通,持续记录
- ECC TO HANA FAGLB03 search-help on Account Number field doesn’t working or not returning the selected value to the Account Number field.详解编程语言
- 利用Oracle TO函数实现数据转换(oracle to_函数)