zoukankan      html  css  js  c++  java
  • [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: {} }
  • 相关阅读:
    写最简单的jsp判断今天是这个星期的第几天
    用jsp写出记忆曲线的表格(用学习新概念英语做例子)
    使用Eclipse建立web工程
    java最最基础知识(入门必备)
    如何配置eclipse里面的tomcat
    简单的eclipse配置
    简单的jdk配置
    python画图(标记、marker、设置标记大小、marker符号大全)(图文详细入门教程五)
    python画图(线条颜色、大小、类型:点、虚线等)(图文详细入门教程四)
    python画图(添加图例、网格)(图文详细入门教程三)
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5100820.html
Copyright © 2011-2022 走看看