How to use shallowRenderer method in storybook-root

Best JavaScript code snippet using storybook-root

ReactShallowRenderer-test.js

Source:ReactShallowRenderer-test.js

1/**2 * Copyright (c) Facebook, Inc. and its affiliates.3 *4 * This source code is licensed under the MIT license found in the5 * LICENSE file in the root directory of this source tree.6 *7 * @emails react-core8 * @jest-environment node9 */10'use strict';11let createRenderer;12let PropTypes;13let React;14describe('ReactShallowRenderer', () => {15  beforeEach(() => {16    jest.resetModules();17    createRenderer = require('react-test-renderer/shallow').createRenderer;18    PropTypes = require('prop-types');19    React = require('react');20  });21  it('should call all of the legacy lifecycle hooks', () => {22    const logs = [];23    const logger = message => () => logs.push(message) || true;24    class SomeComponent extends React.Component {25      UNSAFE_componentWillMount = logger('componentWillMount');26      componentDidMount = logger('componentDidMount');27      UNSAFE_componentWillReceiveProps = logger('componentWillReceiveProps');28      shouldComponentUpdate = logger('shouldComponentUpdate');29      UNSAFE_componentWillUpdate = logger('componentWillUpdate');30      componentDidUpdate = logger('componentDidUpdate');31      componentWillUnmount = logger('componentWillUnmount');32      render() {33        return <div />;34      }35    }36    const shallowRenderer = createRenderer();37    shallowRenderer.render(<SomeComponent foo={1} />);38    // Calling cDU might lead to problems with host component references.39    // Since our components aren't really mounted, refs won't be available.40    expect(logs).toEqual(['componentWillMount']);41    logs.splice(0);42    const instance = shallowRenderer.getMountedInstance();43    instance.setState({});44    expect(logs).toEqual(['shouldComponentUpdate', 'componentWillUpdate']);45    logs.splice(0);46    shallowRenderer.render(<SomeComponent foo={2} />);47    // The previous shallow renderer did not trigger cDU for props changes.48    expect(logs).toEqual([49      'componentWillReceiveProps',50      'shouldComponentUpdate',51      'componentWillUpdate',52    ]);53  });54  it('should call all of the new lifecycle hooks', () => {55    const logs = [];56    const logger = message => () => logs.push(message) || true;57    class SomeComponent extends React.Component {58      state = {};59      static getDerivedStateFromProps = logger('getDerivedStateFromProps');60      componentDidMount = logger('componentDidMount');61      shouldComponentUpdate = logger('shouldComponentUpdate');62      componentDidUpdate = logger('componentDidUpdate');63      componentWillUnmount = logger('componentWillUnmount');64      render() {65        return <div />;66      }67    }68    const shallowRenderer = createRenderer();69    shallowRenderer.render(<SomeComponent foo={1} />);70    // Calling cDU might lead to problems with host component references.71    // Since our components aren't really mounted, refs won't be available.72    expect(logs).toEqual(['getDerivedStateFromProps']);73    logs.splice(0);74    const instance = shallowRenderer.getMountedInstance();75    instance.setState({});76    expect(logs).toEqual(['getDerivedStateFromProps', 'shouldComponentUpdate']);77    logs.splice(0);78    shallowRenderer.render(<SomeComponent foo={2} />);79    // The previous shallow renderer did not trigger cDU for props changes.80    expect(logs).toEqual(['getDerivedStateFromProps', 'shouldComponentUpdate']);81  });82  it('should not invoke deprecated lifecycles (cWM/cWRP/cWU) if new static gDSFP is present', () => {83    class Component extends React.Component {84      state = {};85      static getDerivedStateFromProps() {86        return null;87      }88      componentWillMount() {89        throw Error('unexpected');90      }91      componentWillReceiveProps() {92        throw Error('unexpected');93      }94      componentWillUpdate() {95        throw Error('unexpected');96      }97      render() {98        return null;99      }100    }101    const shallowRenderer = createRenderer();102    shallowRenderer.render(<Component />);103  });104  it('should not invoke deprecated lifecycles (cWM/cWRP/cWU) if new getSnapshotBeforeUpdate is present', () => {105    class Component extends React.Component {106      getSnapshotBeforeUpdate() {107        return null;108      }109      componentWillMount() {110        throw Error('unexpected');111      }112      componentWillReceiveProps() {113        throw Error('unexpected');114      }115      componentWillUpdate() {116        throw Error('unexpected');117      }118      render() {119        return null;120      }121    }122    const shallowRenderer = createRenderer();123    shallowRenderer.render(<Component value={1} />);124    shallowRenderer.render(<Component value={2} />);125  });126  it('should not call getSnapshotBeforeUpdate or componentDidUpdate when updating since refs wont exist', () => {127    class Component extends React.Component {128      getSnapshotBeforeUpdate() {129        throw Error('unexpected');130      }131      componentDidUpdate() {132        throw Error('unexpected');133      }134      render() {135        return null;136      }137    }138    const shallowRenderer = createRenderer();139    shallowRenderer.render(<Component value={1} />);140    shallowRenderer.render(<Component value={2} />);141  });142  it('should only render 1 level deep', () => {143    function Parent() {144      return (145        <div>146          <Child />147        </div>148      );149    }150    function Child() {151      throw Error('This component should not render');152    }153    const shallowRenderer = createRenderer();154    shallowRenderer.render(React.createElement(Parent));155  });156  it('should have shallow rendering', () => {157    class SomeComponent extends React.Component {158      render() {159        return (160          <div>161            <span className="child1" />162            <span className="child2" />163          </div>164        );165      }166    }167    const shallowRenderer = createRenderer();168    const result = shallowRenderer.render(<SomeComponent />);169    expect(result.type).toBe('div');170    expect(result.props.children).toEqual([171      <span className="child1" />,172      <span className="child2" />,173    ]);174  });175  it('should handle ForwardRef', () => {176    const testRef = React.createRef();177    const SomeComponent = React.forwardRef((props, ref) => {178      expect(ref).toEqual(testRef);179      return (180        <div>181          <span className="child1" />182          <span className="child2" />183        </div>184      );185    });186    const shallowRenderer = createRenderer();187    const result = shallowRenderer.render(<SomeComponent ref={testRef} />);188    expect(result.type).toBe('div');189    expect(result.props.children).toEqual([190      <span className="child1" />,191      <span className="child2" />,192    ]);193  });194  it('should handle Profiler', () => {195    class SomeComponent extends React.Component {196      render() {197        return (198          <React.Profiler id="test" onRender={jest.fn()}>199            <div>200              <span className="child1" />201              <span className="child2" />202            </div>203          </React.Profiler>204        );205      }206    }207    const shallowRenderer = createRenderer();208    const result = shallowRenderer.render(<SomeComponent />);209    expect(result.type).toBe(React.Profiler);210    expect(result.props.children).toEqual(211      <div>212        <span className="child1" />213        <span className="child2" />214      </div>,215    );216  });217  it('should enable shouldComponentUpdate to prevent a re-render', () => {218    let renderCounter = 0;219    class SimpleComponent extends React.Component {220      state = {update: false};221      shouldComponentUpdate(nextProps, nextState) {222        return this.state.update !== nextState.update;223      }224      render() {225        renderCounter++;226        return <div>{`${renderCounter}`}</div>;227      }228    }229    const shallowRenderer = createRenderer();230    shallowRenderer.render(<SimpleComponent />);231    expect(shallowRenderer.getRenderOutput()).toEqual(<div>1</div>);232    const instance = shallowRenderer.getMountedInstance();233    instance.setState({update: false});234    expect(shallowRenderer.getRenderOutput()).toEqual(<div>1</div>);235    instance.setState({update: true});236    expect(shallowRenderer.getRenderOutput()).toEqual(<div>2</div>);237  });238  it('should enable PureComponent to prevent a re-render', () => {239    let renderCounter = 0;240    class SimpleComponent extends React.PureComponent {241      state = {update: false};242      render() {243        renderCounter++;244        return <div>{`${renderCounter}`}</div>;245      }246    }247    const shallowRenderer = createRenderer();248    shallowRenderer.render(<SimpleComponent />);249    expect(shallowRenderer.getRenderOutput()).toEqual(<div>1</div>);250    const instance = shallowRenderer.getMountedInstance();251    instance.setState({update: false});252    expect(shallowRenderer.getRenderOutput()).toEqual(<div>1</div>);253    instance.setState({update: true});254    expect(shallowRenderer.getRenderOutput()).toEqual(<div>2</div>);255  });256  it('should not run shouldComponentUpdate during forced update', () => {257    let scuCounter = 0;258    class SimpleComponent extends React.Component {259      state = {count: 1};260      shouldComponentUpdate() {261        scuCounter++;262        return false;263      }264      render() {265        return <div>{`${this.state.count}`}</div>;266      }267    }268    const shallowRenderer = createRenderer();269    shallowRenderer.render(<SimpleComponent />);270    expect(scuCounter).toEqual(0);271    expect(shallowRenderer.getRenderOutput()).toEqual(<div>1</div>);272    // Force update the initial state. sCU should not fire.273    const instance = shallowRenderer.getMountedInstance();274    instance.forceUpdate();275    expect(scuCounter).toEqual(0);276    expect(shallowRenderer.getRenderOutput()).toEqual(<div>1</div>);277    // Setting state updates the instance, but doesn't re-render278    // because sCU returned false.279    instance.setState(state => ({count: state.count + 1}));280    expect(scuCounter).toEqual(1);281    expect(instance.state.count).toEqual(2);282    expect(shallowRenderer.getRenderOutput()).toEqual(<div>1</div>);283    // A force update updates the render output, but doesn't call sCU.284    instance.forceUpdate();285    expect(scuCounter).toEqual(1);286    expect(instance.state.count).toEqual(2);287    expect(shallowRenderer.getRenderOutput()).toEqual(<div>2</div>);288  });289  it('should rerender when calling forceUpdate', () => {290    let renderCounter = 0;291    class SimpleComponent extends React.Component {292      render() {293        renderCounter += 1;294        return <div />;295      }296    }297    const shallowRenderer = createRenderer();298    shallowRenderer.render(<SimpleComponent />);299    expect(renderCounter).toEqual(1);300    const instance = shallowRenderer.getMountedInstance();301    instance.forceUpdate();302    expect(renderCounter).toEqual(2);303  });304  it('should shallow render a function component', () => {305    function SomeComponent(props, context) {306      return (307        <div>308          <div>{props.foo}</div>309          <div>{context.bar}</div>310          <span className="child1" />311          <span className="child2" />312        </div>313      );314    }315    SomeComponent.contextTypes = {316      bar: PropTypes.string,317    };318    const shallowRenderer = createRenderer();319    const result = shallowRenderer.render(<SomeComponent foo={'FOO'} />, {320      bar: 'BAR',321    });322    expect(result.type).toBe('div');323    expect(result.props.children).toEqual([324      <div>FOO</div>,325      <div>BAR</div>,326      <span className="child1" />,327      <span className="child2" />,328    ]);329  });330  it('should shallow render a component returning strings directly from render', () => {331    const Text = ({value}) => value;332    const shallowRenderer = createRenderer();333    const result = shallowRenderer.render(<Text value="foo" />);334    expect(result).toEqual('foo');335  });336  it('should shallow render a component returning numbers directly from render', () => {337    const Text = ({value}) => value;338    const shallowRenderer = createRenderer();339    const result = shallowRenderer.render(<Text value={10} />);340    expect(result).toEqual(10);341  });342  it('should shallow render a fragment', () => {343    class SomeComponent extends React.Component {344      render() {345        return <div />;346      }347    }348    class Fragment extends React.Component {349      render() {350        return [<div key="a" />, <span key="b" />, <SomeComponent />];351      }352    }353    const shallowRenderer = createRenderer();354    const result = shallowRenderer.render(<Fragment />);355    expect(result).toEqual([356      <div key="a" />,357      <span key="b" />,358      <SomeComponent />,359    ]);360  });361  it('should shallow render a React.fragment', () => {362    class SomeComponent extends React.Component {363      render() {364        return <div />;365      }366    }367    class Fragment extends React.Component {368      render() {369        return (370          <React.Fragment>371            <div />372            <span />373            <SomeComponent />374          </React.Fragment>375        );376      }377    }378    const shallowRenderer = createRenderer();379    const result = shallowRenderer.render(<Fragment />);380    expect(result).toEqual(381      <React.Fragment>382        <div />383        <span />384        <SomeComponent />385      </React.Fragment>,386    );387  });388  it('should throw for invalid elements', () => {389    class SomeComponent extends React.Component {390      render() {391        return <div />;392      }393    }394    const shallowRenderer = createRenderer();395    expect(() => shallowRenderer.render(SomeComponent)).toThrowError(396      'ReactShallowRenderer render(): Invalid component element. Instead of ' +397        'passing a component class, make sure to instantiate it by passing it ' +398        'to React.createElement.',399    );400    expect(() => shallowRenderer.render(<div />)).toThrowError(401      'ReactShallowRenderer render(): Shallow rendering works only with ' +402        'custom components, not primitives (div). Instead of calling ' +403        '`.render(el)` and inspecting the rendered output, look at `el.props` ' +404        'directly instead.',405    );406  });407  it('should have shallow unmounting', () => {408    const componentWillUnmount = jest.fn();409    class SomeComponent extends React.Component {410      componentWillUnmount = componentWillUnmount;411      render() {412        return <div />;413      }414    }415    const shallowRenderer = createRenderer();416    shallowRenderer.render(<SomeComponent />);417    shallowRenderer.unmount();418    expect(componentWillUnmount).toBeCalled();419  });420  it('can shallow render to null', () => {421    class SomeComponent extends React.Component {422      render() {423        return null;424      }425    }426    const shallowRenderer = createRenderer();427    const result = shallowRenderer.render(<SomeComponent />);428    expect(result).toBe(null);429  });430  it('can shallow render with a ref', () => {431    class SomeComponent extends React.Component {432      render() {433        return <div ref="hello" />;434      }435    }436    const shallowRenderer = createRenderer();437    // Shouldn't crash.438    shallowRenderer.render(<SomeComponent />);439  });440  it('lets you update shallowly rendered components', () => {441    class SomeComponent extends React.Component {442      state = {clicked: false};443      onClick = () => {444        this.setState({clicked: true});445      };446      render() {447        const className = this.state.clicked ? 'was-clicked' : '';448        if (this.props.aNew === 'prop') {449          return (450            <a href="#" onClick={this.onClick} className={className}>451              Test link452            </a>453          );454        } else {455          return (456            <div>457              <span className="child1" />458              <span className="child2" />459            </div>460          );461        }462      }463    }464    const shallowRenderer = createRenderer();465    const result = shallowRenderer.render(<SomeComponent />);466    expect(result.type).toBe('div');467    expect(result.props.children).toEqual([468      <span className="child1" />,469      <span className="child2" />,470    ]);471    const updatedResult = shallowRenderer.render(<SomeComponent aNew="prop" />);472    expect(updatedResult.type).toBe('a');473    const mockEvent = {};474    updatedResult.props.onClick(mockEvent);475    const updatedResultCausedByClick = shallowRenderer.getRenderOutput();476    expect(updatedResultCausedByClick.type).toBe('a');477    expect(updatedResultCausedByClick.props.className).toBe('was-clicked');478  });479  it('can access the mounted component instance', () => {480    class SimpleComponent extends React.Component {481      someMethod = () => {482        return this.props.n;483      };484      render() {485        return <div>{this.props.n}</div>;486      }487    }488    const shallowRenderer = createRenderer();489    shallowRenderer.render(<SimpleComponent n={5} />);490    expect(shallowRenderer.getMountedInstance().someMethod()).toEqual(5);491  });492  it('can shallowly render components with contextTypes', () => {493    class SimpleComponent extends React.Component {494      static contextTypes = {495        name: PropTypes.string,496      };497      render() {498        return <div />;499      }500    }501    const shallowRenderer = createRenderer();502    const result = shallowRenderer.render(<SimpleComponent />);503    expect(result).toEqual(<div />);504  });505  it('passes expected params to legacy component lifecycle methods', () => {506    const componentDidUpdateParams = [];507    const componentWillReceivePropsParams = [];508    const componentWillUpdateParams = [];509    const setStateParams = [];510    const shouldComponentUpdateParams = [];511    const initialProp = {prop: 'init prop'};512    const initialState = {state: 'init state'};513    const initialContext = {context: 'init context'};514    const updatedState = {state: 'updated state'};515    const updatedProp = {prop: 'updated prop'};516    const updatedContext = {context: 'updated context'};517    class SimpleComponent extends React.Component {518      constructor(props, context) {519        super(props, context);520        this.state = initialState;521      }522      static contextTypes = {523        context: PropTypes.string,524      };525      componentDidUpdate(...args) {526        componentDidUpdateParams.push(...args);527      }528      UNSAFE_componentWillReceiveProps(...args) {529        componentWillReceivePropsParams.push(...args);530        this.setState((...innerArgs) => {531          setStateParams.push(...innerArgs);532          return updatedState;533        });534      }535      UNSAFE_componentWillUpdate(...args) {536        componentWillUpdateParams.push(...args);537      }538      shouldComponentUpdate(...args) {539        shouldComponentUpdateParams.push(...args);540        return true;541      }542      render() {543        return null;544      }545    }546    const shallowRenderer = createRenderer();547    shallowRenderer.render(548      React.createElement(SimpleComponent, initialProp),549      initialContext,550    );551    expect(componentDidUpdateParams).toEqual([]);552    expect(componentWillReceivePropsParams).toEqual([]);553    expect(componentWillUpdateParams).toEqual([]);554    expect(setStateParams).toEqual([]);555    expect(shouldComponentUpdateParams).toEqual([]);556    // Lifecycle hooks should be invoked with the correct prev/next params on update.557    shallowRenderer.render(558      React.createElement(SimpleComponent, updatedProp),559      updatedContext,560    );561    expect(componentWillReceivePropsParams).toEqual([562      updatedProp,563      updatedContext,564    ]);565    expect(setStateParams).toEqual([initialState, initialProp]);566    expect(shouldComponentUpdateParams).toEqual([567      updatedProp,568      updatedState,569      updatedContext,570    ]);571    expect(componentWillUpdateParams).toEqual([572      updatedProp,573      updatedState,574      updatedContext,575    ]);576    expect(componentDidUpdateParams).toEqual([]);577  });578  it('passes expected params to new component lifecycle methods', () => {579    const componentDidUpdateParams = [];580    const getDerivedStateFromPropsParams = [];581    const shouldComponentUpdateParams = [];582    const initialProp = {prop: 'init prop'};583    const initialState = {state: 'init state'};584    const initialContext = {context: 'init context'};585    const updatedProp = {prop: 'updated prop'};586    const updatedContext = {context: 'updated context'};587    class SimpleComponent extends React.Component {588      constructor(props, context) {589        super(props, context);590        this.state = initialState;591      }592      static contextTypes = {593        context: PropTypes.string,594      };595      componentDidUpdate(...args) {596        componentDidUpdateParams.push(...args);597      }598      static getDerivedStateFromProps(...args) {599        getDerivedStateFromPropsParams.push(args);600        return null;601      }602      shouldComponentUpdate(...args) {603        shouldComponentUpdateParams.push(...args);604        return true;605      }606      render() {607        return null;608      }609    }610    const shallowRenderer = createRenderer();611    // The only lifecycle hook that should be invoked on initial render612    // Is the static getDerivedStateFromProps() methods613    shallowRenderer.render(614      React.createElement(SimpleComponent, initialProp),615      initialContext,616    );617    expect(getDerivedStateFromPropsParams).toEqual([618      [initialProp, initialState],619    ]);620    expect(componentDidUpdateParams).toEqual([]);621    expect(shouldComponentUpdateParams).toEqual([]);622    // Lifecycle hooks should be invoked with the correct prev/next params on update.623    shallowRenderer.render(624      React.createElement(SimpleComponent, updatedProp),625      updatedContext,626    );627    expect(getDerivedStateFromPropsParams).toEqual([628      [initialProp, initialState],629      [updatedProp, initialState],630    ]);631    expect(shouldComponentUpdateParams).toEqual([632      updatedProp,633      initialState,634      updatedContext,635    ]);636    expect(componentDidUpdateParams).toEqual([]);637  });638  it('can shallowly render components with ref as function', () => {639    class SimpleComponent extends React.Component {640      state = {clicked: false};641      handleUserClick = () => {642        this.setState({clicked: true});643      };644      render() {645        return (646          <div647            ref={() => {}}648            onClick={this.handleUserClick}649            className={this.state.clicked ? 'clicked' : ''}650          />651        );652      }653    }654    const shallowRenderer = createRenderer();655    shallowRenderer.render(<SimpleComponent />);656    let result = shallowRenderer.getRenderOutput();657    expect(result.type).toEqual('div');658    expect(result.props.className).toEqual('');659    result.props.onClick();660    result = shallowRenderer.getRenderOutput();661    expect(result.type).toEqual('div');662    expect(result.props.className).toEqual('clicked');663  });664  it('can initialize state via static getDerivedStateFromProps', () => {665    class SimpleComponent extends React.Component {666      state = {667        count: 1,668      };669      static getDerivedStateFromProps(props, prevState) {670        return {671          count: prevState.count + props.incrementBy,672          other: 'foobar',673        };674      }675      render() {676        return (677          <div>{`count:${this.state.count}, other:${this.state.other}`}</div>678        );679      }680    }681    const shallowRenderer = createRenderer();682    const result = shallowRenderer.render(<SimpleComponent incrementBy={2} />);683    expect(result).toEqual(<div>count:3, other:foobar</div>);684  });685  it('can setState in componentWillMount when shallow rendering', () => {686    class SimpleComponent extends React.Component {687      UNSAFE_componentWillMount() {688        this.setState({groovy: 'doovy'});689      }690      render() {691        return <div>{this.state.groovy}</div>;692      }693    }694    const shallowRenderer = createRenderer();695    const result = shallowRenderer.render(<SimpleComponent />);696    expect(result).toEqual(<div>doovy</div>);697  });698  it('can setState in componentWillMount repeatedly when shallow rendering', () => {699    class SimpleComponent extends React.Component {700      state = {701        separator: '-',702      };703      UNSAFE_componentWillMount() {704        this.setState({groovy: 'doovy'});705        this.setState({doovy: 'groovy'});706      }707      render() {708        const {groovy, doovy, separator} = this.state;709        return <div>{`${groovy}${separator}${doovy}`}</div>;710      }711    }712    const shallowRenderer = createRenderer();713    const result = shallowRenderer.render(<SimpleComponent />);714    expect(result).toEqual(<div>doovy-groovy</div>);715  });716  it('can setState in componentWillMount with an updater function repeatedly when shallow rendering', () => {717    class SimpleComponent extends React.Component {718      state = {719        separator: '-',720      };721      UNSAFE_componentWillMount() {722        this.setState(state => ({groovy: 'doovy'}));723        this.setState(state => ({doovy: state.groovy}));724      }725      render() {726        const {groovy, doovy, separator} = this.state;727        return <div>{`${groovy}${separator}${doovy}`}</div>;728      }729    }730    const shallowRenderer = createRenderer();731    const result = shallowRenderer.render(<SimpleComponent />);732    expect(result).toEqual(<div>doovy-doovy</div>);733  });734  it('can setState in componentWillReceiveProps when shallow rendering', () => {735    class SimpleComponent extends React.Component {736      state = {count: 0};737      UNSAFE_componentWillReceiveProps(nextProps) {738        if (nextProps.updateState) {739          this.setState({count: 1});740        }741      }742      render() {743        return <div>{this.state.count}</div>;744      }745    }746    const shallowRenderer = createRenderer();747    let result = shallowRenderer.render(748      <SimpleComponent updateState={false} />,749    );750    expect(result.props.children).toEqual(0);751    result = shallowRenderer.render(<SimpleComponent updateState={true} />);752    expect(result.props.children).toEqual(1);753  });754  it('can update state with static getDerivedStateFromProps when shallow rendering', () => {755    class SimpleComponent extends React.Component {756      state = {count: 1};757      static getDerivedStateFromProps(nextProps, prevState) {758        if (nextProps.updateState) {759          return {count: nextProps.incrementBy + prevState.count};760        }761        return null;762      }763      render() {764        return <div>{this.state.count}</div>;765      }766    }767    const shallowRenderer = createRenderer();768    let result = shallowRenderer.render(769      <SimpleComponent updateState={false} incrementBy={0} />,770    );771    expect(result.props.children).toEqual(1);772    result = shallowRenderer.render(773      <SimpleComponent updateState={true} incrementBy={2} />,774    );775    expect(result.props.children).toEqual(3);776    result = shallowRenderer.render(777      <SimpleComponent updateState={false} incrementBy={2} />,778    );779    expect(result.props.children).toEqual(3);780  });781  it('should not override state with stale values if prevState is spread within getDerivedStateFromProps', () => {782    class SimpleComponent extends React.Component {783      state = {value: 0};784      static getDerivedStateFromProps(nextProps, prevState) {785        return {...prevState};786      }787      updateState = () => {788        this.setState(state => ({value: state.value + 1}));789      };790      render() {791        return <div>{`value:${this.state.value}`}</div>;792      }793    }794    const shallowRenderer = createRenderer();795    let result = shallowRenderer.render(<SimpleComponent />);796    expect(result).toEqual(<div>value:0</div>);797    let instance = shallowRenderer.getMountedInstance();798    instance.updateState();799    result = shallowRenderer.getRenderOutput();800    expect(result).toEqual(<div>value:1</div>);801  });802  it('should pass previous state to shouldComponentUpdate even with getDerivedStateFromProps', () => {803    class SimpleComponent extends React.Component {804      constructor(props) {805        super(props);806        this.state = {807          value: props.value,808        };809      }810      static getDerivedStateFromProps(nextProps, prevState) {811        if (nextProps.value === prevState.value) {812          return null;813        }814        return {value: nextProps.value};815      }816      shouldComponentUpdate(nextProps, nextState) {817        return nextState.value !== this.state.value;818      }819      render() {820        return <div>{`value:${this.state.value}`}</div>;821      }822    }823    const shallowRenderer = createRenderer();824    const initialResult = shallowRenderer.render(825      <SimpleComponent value="initial" />,826    );827    expect(initialResult).toEqual(<div>value:initial</div>);828    const updatedResult = shallowRenderer.render(829      <SimpleComponent value="updated" />,830    );831    expect(updatedResult).toEqual(<div>value:updated</div>);832  });833  it('can setState with an updater function', () => {834    let instance;835    class SimpleComponent extends React.Component {836      state = {837        counter: 0,838      };839      render() {840        instance = this;841        return (842          <button ref="button" onClick={this.onClick}>843            {this.state.counter}844          </button>845        );846      }847    }848    const shallowRenderer = createRenderer();849    let result = shallowRenderer.render(<SimpleComponent defaultCount={1} />);850    expect(result.props.children).toEqual(0);851    instance.setState((state, props) => {852      return {counter: props.defaultCount + 1};853    });854    result = shallowRenderer.getRenderOutput();855    expect(result.props.children).toEqual(2);856  });857  it('can access component instance from setState updater function', done => {858    let instance;859    class SimpleComponent extends React.Component {860      state = {};861      render() {862        instance = this;863        return null;864      }865    }866    const shallowRenderer = createRenderer();867    shallowRenderer.render(<SimpleComponent />);868    instance.setState(function updater(state, props) {869      expect(this).toBe(instance);870      done();871    });872  });873  it('can setState with a callback', () => {874    let instance;875    class SimpleComponent extends React.Component {876      state = {877        counter: 0,878      };879      render() {880        instance = this;881        return <p>{this.state.counter}</p>;882      }883    }884    const shallowRenderer = createRenderer();885    const result = shallowRenderer.render(<SimpleComponent />);886    expect(result.props.children).toBe(0);887    const callback = jest.fn(function() {888      expect(this).toBe(instance);889    });890    instance.setState({counter: 1}, callback);891    const updated = shallowRenderer.getRenderOutput();892    expect(updated.props.children).toBe(1);893    expect(callback).toHaveBeenCalled();894  });895  it('can replaceState with a callback', () => {896    let instance;897    class SimpleComponent extends React.Component {898      state = {899        counter: 0,900      };901      render() {902        instance = this;903        return <p>{this.state.counter}</p>;904      }905    }906    const shallowRenderer = createRenderer();907    const result = shallowRenderer.render(<SimpleComponent />);908    expect(result.props.children).toBe(0);909    const callback = jest.fn(function() {910      expect(this).toBe(instance);911    });912    // No longer a public API, but we can test that it works internally by913    // reaching into the updater.914    shallowRenderer._updater.enqueueReplaceState(915      instance,916      {counter: 1},917      callback,918    );919    const updated = shallowRenderer.getRenderOutput();920    expect(updated.props.children).toBe(1);921    expect(callback).toHaveBeenCalled();922  });923  it('can forceUpdate with a callback', () => {924    let instance;925    class SimpleComponent extends React.Component {926      state = {927        counter: 0,928      };929      render() {930        instance = this;931        return <p>{this.state.counter}</p>;932      }933    }934    const shallowRenderer = createRenderer();935    const result = shallowRenderer.render(<SimpleComponent />);936    expect(result.props.children).toBe(0);937    const callback = jest.fn(function() {938      expect(this).toBe(instance);939    });940    instance.forceUpdate(callback);941    const updated = shallowRenderer.getRenderOutput();942    expect(updated.props.children).toBe(0);943    expect(callback).toHaveBeenCalled();944  });945  it('can pass context when shallowly rendering', () => {946    class SimpleComponent extends React.Component {947      static contextTypes = {948        name: PropTypes.string,949      };950      render() {951        return <div>{this.context.name}</div>;952      }953    }954    const shallowRenderer = createRenderer();955    const result = shallowRenderer.render(<SimpleComponent />, {956      name: 'foo',957    });958    expect(result).toEqual(<div>foo</div>);959  });960  it('should track context across updates', () => {961    class SimpleComponent extends React.Component {962      static contextTypes = {963        foo: PropTypes.string,964      };965      state = {966        bar: 'bar',967      };968      render() {969        return <div>{`${this.context.foo}:${this.state.bar}`}</div>;970      }971    }972    const shallowRenderer = createRenderer();973    let result = shallowRenderer.render(<SimpleComponent />, {974      foo: 'foo',975    });976    expect(result).toEqual(<div>foo:bar</div>);977    const instance = shallowRenderer.getMountedInstance();978    instance.setState({bar: 'baz'});979    result = shallowRenderer.getRenderOutput();980    expect(result).toEqual(<div>foo:baz</div>);981  });982  it('should filter context by contextTypes', () => {983    class SimpleComponent extends React.Component {984      static contextTypes = {985        foo: PropTypes.string,986      };987      render() {988        return <div>{`${this.context.foo}:${this.context.bar}`}</div>;989      }990    }991    const shallowRenderer = createRenderer();992    let result = shallowRenderer.render(<SimpleComponent />, {993      foo: 'foo',994      bar: 'bar',995    });996    expect(result).toEqual(<div>foo:undefined</div>);997  });998  it('can fail context when shallowly rendering', () => {999    class SimpleComponent extends React.Component {1000      static contextTypes = {1001        name: PropTypes.string.isRequired,1002      };1003      render() {1004        return <div>{this.context.name}</div>;1005      }1006    }1007    const shallowRenderer = createRenderer();1008    expect(() => shallowRenderer.render(<SimpleComponent />)).toWarnDev(1009      'Warning: Failed context type: The context `name` is marked as ' +1010        'required in `SimpleComponent`, but its value is `undefined`.\n' +1011        '    in SimpleComponent (at **)',1012    );1013  });1014  it('should warn about propTypes (but only once)', () => {1015    class SimpleComponent extends React.Component {1016      render() {1017        return React.createElement('div', null, this.props.name);1018      }1019    }1020    SimpleComponent.propTypes = {1021      name: PropTypes.string.isRequired,1022    };1023    const shallowRenderer = createRenderer();1024    expect(() =>1025      shallowRenderer.render(React.createElement(SimpleComponent, {name: 123})),1026    ).toWarnDev(1027      'Warning: Failed prop type: Invalid prop `name` of type `number` ' +1028        'supplied to `SimpleComponent`, expected `string`.\n' +1029        '    in SimpleComponent',1030    );1031  });1032  it('should enable rendering of cloned element', () => {1033    class SimpleComponent extends React.Component {1034      constructor(props) {1035        super(props);1036        this.state = {1037          bar: 'bar',1038        };1039      }1040      render() {1041        return <div>{`${this.props.foo}:${this.state.bar}`}</div>;1042      }1043    }1044    const shallowRenderer = createRenderer();1045    const el = <SimpleComponent foo="foo" />;1046    let result = shallowRenderer.render(el);1047    expect(result).toEqual(<div>foo:bar</div>);1048    const cloned = React.cloneElement(el, {foo: 'baz'});1049    result = shallowRenderer.render(cloned);1050    expect(result).toEqual(<div>baz:bar</div>);1051  });1052  it('this.state should be updated on setState callback inside componentWillMount', () => {1053    let stateSuccessfullyUpdated = false;1054    class Component extends React.Component {1055      constructor(props, context) {1056        super(props, context);1057        this.state = {1058          hasUpdatedState: false,1059        };1060      }1061      UNSAFE_componentWillMount() {1062        this.setState(1063          {hasUpdatedState: true},1064          () => (stateSuccessfullyUpdated = this.state.hasUpdatedState),1065        );1066      }1067      render() {1068        return <div>{this.props.children}</div>;1069      }1070    }1071    const shallowRenderer = createRenderer();1072    shallowRenderer.render(<Component />);1073    expect(stateSuccessfullyUpdated).toBe(true);1074  });1075  it('should handle multiple callbacks', () => {1076    const mockFn = jest.fn();1077    const shallowRenderer = createRenderer();1078    class Component extends React.Component {1079      constructor(props, context) {1080        super(props, context);1081        this.state = {1082          foo: 'foo',1083        };1084      }1085      UNSAFE_componentWillMount() {1086        this.setState({foo: 'bar'}, () => mockFn());1087        this.setState({foo: 'foobar'}, () => mockFn());1088      }1089      render() {1090        return <div>{this.state.foo}</div>;1091      }1092    }1093    shallowRenderer.render(<Component />);1094    expect(mockFn).toHaveBeenCalledTimes(2);1095    // Ensure the callback queue is cleared after the callbacks are invoked1096    const mountedInstance = shallowRenderer.getMountedInstance();1097    mountedInstance.setState({foo: 'bar'}, () => mockFn());1098    expect(mockFn).toHaveBeenCalledTimes(3);1099  });1100  it('should call the setState callback even if shouldComponentUpdate = false', done => {1101    const mockFn = jest.fn().mockReturnValue(false);1102    class Component extends React.Component {1103      constructor(props, context) {1104        super(props, context);1105        this.state = {1106          hasUpdatedState: false,1107        };1108      }1109      shouldComponentUpdate() {1110        return mockFn();1111      }1112      render() {1113        return <div>{this.state.hasUpdatedState}</div>;1114      }1115    }1116    const shallowRenderer = createRenderer();1117    shallowRenderer.render(<Component />);1118    const mountedInstance = shallowRenderer.getMountedInstance();1119    mountedInstance.setState({hasUpdatedState: true}, () => {1120      expect(mockFn).toBeCalled();1121      expect(mountedInstance.state.hasUpdatedState).toBe(true);1122      done();1123    });1124  });1125  it('throws usefully when rendering badly-typed elements', () => {1126    const shallowRenderer = createRenderer();1127    const renderAndVerifyWarningAndError = (Component, typeString) => {1128      expect(() => {1129        expect(() => shallowRenderer.render(<Component />)).toWarnDev(1130          'React.createElement: type is invalid -- expected a string ' +1131            '(for built-in components) or a class/function (for composite components) ' +1132            `but got: ${typeString}.`,1133        );1134      }).toThrowError(1135        'ReactShallowRenderer render(): Shallow rendering works only with custom ' +1136          `components, but the provided element type was \`${typeString}\`.`,1137      );1138    };1139    renderAndVerifyWarningAndError(undefined, 'undefined');1140    renderAndVerifyWarningAndError(null, 'null');1141    renderAndVerifyWarningAndError([], 'array');1142    renderAndVerifyWarningAndError({}, 'object');1143  });1144  it('should have initial state of null if not defined', () => {1145    class SomeComponent extends React.Component {1146      render() {1147        return <span />;1148      }1149    }1150    const shallowRenderer = createRenderer();1151    shallowRenderer.render(<SomeComponent />);1152    expect(shallowRenderer.getMountedInstance().state).toBeNull();1153  });1154  it('should invoke both deprecated and new lifecycles if both are present', () => {1155    const log = [];1156    class Component extends React.Component {1157      componentWillMount() {1158        log.push('componentWillMount');1159      }1160      componentWillReceiveProps() {1161        log.push('componentWillReceiveProps');1162      }1163      componentWillUpdate() {1164        log.push('componentWillUpdate');1165      }1166      UNSAFE_componentWillMount() {1167        log.push('UNSAFE_componentWillMount');1168      }1169      UNSAFE_componentWillReceiveProps() {1170        log.push('UNSAFE_componentWillReceiveProps');1171      }1172      UNSAFE_componentWillUpdate() {1173        log.push('UNSAFE_componentWillUpdate');1174      }1175      render() {1176        return null;1177      }1178    }1179    const shallowRenderer = createRenderer();1180    shallowRenderer.render(<Component foo="bar" />);1181    expect(log).toEqual(['componentWillMount', 'UNSAFE_componentWillMount']);1182    log.length = 0;1183    shallowRenderer.render(<Component foo="baz" />);1184    expect(log).toEqual([1185      'componentWillReceiveProps',1186      'UNSAFE_componentWillReceiveProps',1187      'componentWillUpdate',1188      'UNSAFE_componentWillUpdate',1189    ]);1190  });1191  it('should stop the update when setState returns null or undefined', () => {1192    const log = [];1193    let instance;1194    class Component extends React.Component {1195      constructor(props) {1196        super(props);1197        this.state = {1198          count: 0,1199        };1200      }1201      render() {1202        log.push('render');1203        instance = this;1204        return null;1205      }1206    }1207    const shallowRenderer = createRenderer();1208    shallowRenderer.render(<Component />);1209    log.length = 0;1210    instance.setState(() => null);1211    instance.setState(() => undefined);1212    instance.setState(null);1213    instance.setState(undefined);1214    expect(log).toEqual([]);1215    instance.setState(state => ({count: state.count + 1}));1216    expect(log).toEqual(['render']);1217  });1218  it('should not get this in a function component', () => {1219    const logs = [];1220    function Foo() {1221      logs.push(this);1222      return <div>foo</div>;1223    }1224    const shallowRenderer = createRenderer();1225    shallowRenderer.render(<Foo foo="bar" />);1226    expect(logs).toEqual([undefined]);1227  });1228  it('should handle memo', () => {1229    function Foo() {1230      return <div>foo</div>;1231    }1232    const MemoFoo = React.memo(Foo);1233    const shallowRenderer = createRenderer();1234    shallowRenderer.render(<MemoFoo />);1235  });1236  it('should enable React.memo to prevent a re-render', () => {1237    const logs = [];1238    const Foo = React.memo(({count}) => {1239      logs.push(`Foo: ${count}`);1240      return <div>{count}</div>;1241    });1242    const Bar = React.memo(({count}) => {1243      logs.push(`Bar: ${count}`);1244      return <div>{count}</div>;1245    });1246    const shallowRenderer = createRenderer();1247    shallowRenderer.render(<Foo count={1} />);1248    expect(logs).toEqual(['Foo: 1']);1249    logs.length = 0;1250    // Rendering the same element with the same props should be prevented1251    shallowRenderer.render(<Foo count={1} />);1252    expect(logs).toEqual([]);1253    // A different element with the same props should cause a re-render1254    shallowRenderer.render(<Bar count={1} />);1255    expect(logs).toEqual(['Bar: 1']);1256  });1257  it('should respect a custom comparison function with React.memo', () => {1258    let renderCount = 0;1259    function areEqual(props, nextProps) {1260      return props.foo === nextProps.foo;1261    }1262    const Foo = React.memo(({foo, bar}) => {1263      renderCount++;1264      return (1265        <div>1266          {foo} {bar}1267        </div>1268      );1269    }, areEqual);1270    const shallowRenderer = createRenderer();1271    shallowRenderer.render(<Foo foo={1} bar={1} />);1272    expect(renderCount).toBe(1);1273    // Change a prop that the comparison funciton ignores1274    shallowRenderer.render(<Foo foo={1} bar={2} />);1275    expect(renderCount).toBe(1);1276    shallowRenderer.render(<Foo foo={2} bar={2} />);1277    expect(renderCount).toBe(2);1278  });1279  it('should not call the comparison function with React.memo on the initial render', () => {1280    const areEqual = jest.fn(() => false);1281    const SomeComponent = React.memo(({foo}) => {1282      return <div>{foo}</div>;1283    }, areEqual);1284    const shallowRenderer = createRenderer();1285    shallowRenderer.render(<SomeComponent foo={1} />);1286    expect(areEqual).not.toHaveBeenCalled();1287    expect(shallowRenderer.getRenderOutput()).toEqual(<div>{1}</div>);1288  });1289  it('should handle memo(forwardRef())', () => {1290    const testRef = React.createRef();1291    const SomeComponent = React.forwardRef((props, ref) => {1292      expect(ref).toEqual(testRef);1293      return (1294        <div>1295          <span className="child1" />1296          <span className="child2" />1297        </div>1298      );1299    });1300    const SomeMemoComponent = React.memo(SomeComponent);1301    const shallowRenderer = createRenderer();1302    const result = shallowRenderer.render(<SomeMemoComponent ref={testRef} />);1303    expect(result.type).toBe('div');1304    expect(result.props.children).toEqual([1305      <span className="child1" />,1306      <span className="child2" />,1307    ]);1308  });1309  it('should warn for forwardRef(memo())', () => {1310    const testRef = React.createRef();1311    const SomeMemoComponent = React.memo(({foo}) => {1312      return <div>{foo}</div>;1313    });1314    const shallowRenderer = createRenderer();1315    expect(() => {1316      expect(() => {1317        const SomeComponent = React.forwardRef(SomeMemoComponent);1318        shallowRenderer.render(<SomeComponent ref={testRef} />);1319      }).toWarnDev(1320        'Warning: forwardRef requires a render function but received ' +1321          'a `memo` component. Instead of forwardRef(memo(...)), use ' +1322          'memo(forwardRef(...))',1323        {withoutStack: true},1324      );1325    }).toThrowError(1326      'forwardRef requires a render function but was given object.',1327    );1328  });1329  it('should let you change type', () => {1330    function Foo({prop}) {1331      return <div>Foo {prop}</div>;1332    }1333    function Bar({prop}) {1334      return <div>Bar {prop}</div>;1335    }1336    const shallowRenderer = createRenderer();1337    shallowRenderer.render(<Foo prop="foo1" />);1338    expect(shallowRenderer.getRenderOutput()).toEqual(<div>Foo {'foo1'}</div>);1339    shallowRenderer.render(<Foo prop="foo2" />);1340    expect(shallowRenderer.getRenderOutput()).toEqual(<div>Foo {'foo2'}</div>);1341    shallowRenderer.render(<Bar prop="bar1" />);1342    expect(shallowRenderer.getRenderOutput()).toEqual(<div>Bar {'bar1'}</div>);1343    shallowRenderer.render(<Bar prop="bar2" />);1344    expect(shallowRenderer.getRenderOutput()).toEqual(<div>Bar {'bar2'}</div>);1345  });1346  it('should let you change class type', () => {1347    class Foo extends React.Component {1348      render() {1349        return <div>Foo {this.props.prop}</div>;1350      }1351    }1352    class Bar extends React.Component {1353      render() {1354        return <div>Bar {this.props.prop}</div>;1355      }1356    }1357    const shallowRenderer = createRenderer();1358    shallowRenderer.render(<Foo prop="foo1" />);1359    expect(shallowRenderer.getRenderOutput()).toEqual(<div>Foo {'foo1'}</div>);1360    shallowRenderer.render(<Foo prop="foo2" />);1361    expect(shallowRenderer.getRenderOutput()).toEqual(<div>Foo {'foo2'}</div>);1362    shallowRenderer.render(<Bar prop="bar1" />);1363    expect(shallowRenderer.getRenderOutput()).toEqual(<div>Bar {'bar1'}</div>);1364    shallowRenderer.render(<Bar prop="bar2" />);1365    expect(shallowRenderer.getRenderOutput()).toEqual(<div>Bar {'bar2'}</div>);1366  });...

ReactShallowRendererMemo-test.js

Source:ReactShallowRendererMemo-test.js

1/**2 * Copyright (c) Facebook, Inc. and its affiliates.3 *4 * This source code is licensed under the MIT license found in the5 * LICENSE file in the root directory of this source tree.6 *7 * @emails react-core8 * @jest-environment node9 */10'use strict';11let createRenderer;12let PropTypes;13let React;14describe('ReactShallowRendererMemo', () => {15  beforeEach(() => {16    jest.resetModules();17    createRenderer = require('react-test-renderer/shallow').createRenderer;18    PropTypes = require('prop-types');19    React = require('react');20  });21  it('should call all of the legacy lifecycle hooks', () => {22    const logs = [];23    const logger = message => () => logs.push(message) || true;24    const SomeComponent = React.memo(25      class SomeComponent extends React.Component {26        UNSAFE_componentWillMount = logger('componentWillMount');27        componentDidMount = logger('componentDidMount');28        UNSAFE_componentWillReceiveProps = logger('componentWillReceiveProps');29        shouldComponentUpdate = logger('shouldComponentUpdate');30        UNSAFE_componentWillUpdate = logger('componentWillUpdate');31        componentDidUpdate = logger('componentDidUpdate');32        componentWillUnmount = logger('componentWillUnmount');33        render() {34          return <div />;35        }36      },37    );38    const shallowRenderer = createRenderer();39    shallowRenderer.render(<SomeComponent foo={1} />);40    // Calling cDU might lead to problems with host component references.41    // Since our components aren't really mounted, refs won't be available.42    expect(logs).toEqual(['componentWillMount']);43    logs.splice(0);44    const instance = shallowRenderer.getMountedInstance();45    instance.setState({});46    expect(logs).toEqual(['shouldComponentUpdate', 'componentWillUpdate']);47    logs.splice(0);48    shallowRenderer.render(<SomeComponent foo={2} />);49    // The previous shallow renderer did not trigger cDU for props changes.50    expect(logs).toEqual([51      'componentWillReceiveProps',52      'shouldComponentUpdate',53      'componentWillUpdate',54    ]);55  });56  it('should call all of the new lifecycle hooks', () => {57    const logs = [];58    const logger = message => () => logs.push(message) || true;59    const SomeComponent = React.memo(60      class SomeComponent extends React.Component {61        state = {};62        static getDerivedStateFromProps = logger('getDerivedStateFromProps');63        componentDidMount = logger('componentDidMount');64        shouldComponentUpdate = logger('shouldComponentUpdate');65        componentDidUpdate = logger('componentDidUpdate');66        componentWillUnmount = logger('componentWillUnmount');67        render() {68          return <div />;69        }70      },71    );72    const shallowRenderer = createRenderer();73    shallowRenderer.render(<SomeComponent foo={1} />);74    // Calling cDU might lead to problems with host component references.75    // Since our components aren't really mounted, refs won't be available.76    expect(logs).toEqual(['getDerivedStateFromProps']);77    logs.splice(0);78    const instance = shallowRenderer.getMountedInstance();79    instance.setState({});80    expect(logs).toEqual(['getDerivedStateFromProps', 'shouldComponentUpdate']);81    logs.splice(0);82    shallowRenderer.render(<SomeComponent foo={2} />);83    // The previous shallow renderer did not trigger cDU for props changes.84    expect(logs).toEqual(['getDerivedStateFromProps', 'shouldComponentUpdate']);85  });86  it('should not invoke deprecated lifecycles (cWM/cWRP/cWU) if new static gDSFP is present', () => {87    const Component = React.memo(88      class Component extends React.Component {89        state = {};90        static getDerivedStateFromProps() {91          return null;92        }93        componentWillMount() {94          throw Error('unexpected');95        }96        componentWillReceiveProps() {97          throw Error('unexpected');98        }99        componentWillUpdate() {100          throw Error('unexpected');101        }102        render() {103          return null;104        }105      },106    );107    const shallowRenderer = createRenderer();108    shallowRenderer.render(<Component />);109  });110  it('should not invoke deprecated lifecycles (cWM/cWRP/cWU) if new getSnapshotBeforeUpdate is present', () => {111    const Component = React.memo(112      class Component extends React.Component {113        getSnapshotBeforeUpdate() {114          return null;115        }116        componentWillMount() {117          throw Error('unexpected');118        }119        componentWillReceiveProps() {120          throw Error('unexpected');121        }122        componentWillUpdate() {123          throw Error('unexpected');124        }125        render() {126          return null;127        }128      },129    );130    const shallowRenderer = createRenderer();131    shallowRenderer.render(<Component value={1} />);132    shallowRenderer.render(<Component value={2} />);133  });134  it('should not call getSnapshotBeforeUpdate or componentDidUpdate when updating since refs wont exist', () => {135    const Component = React.memo(136      class Component extends React.Component {137        getSnapshotBeforeUpdate() {138          throw Error('unexpected');139        }140        componentDidUpdate() {141          throw Error('unexpected');142        }143        render() {144          return null;145        }146      },147    );148    const shallowRenderer = createRenderer();149    shallowRenderer.render(<Component value={1} />);150    shallowRenderer.render(<Component value={2} />);151  });152  it('should only render 1 level deep', () => {153    const Parent = React.memo(function Parent() {154      return (155        <div>156          <Child />157        </div>158      );159    });160    function Child() {161      throw Error('This component should not render');162    }163    const shallowRenderer = createRenderer();164    shallowRenderer.render(React.createElement(Parent));165  });166  it('should have shallow rendering', () => {167    const SomeComponent = React.memo(168      class SomeComponent extends React.Component {169        render() {170          return (171            <div>172              <span className="child1" />173              <span className="child2" />174            </div>175          );176        }177      },178    );179    const shallowRenderer = createRenderer();180    const result = shallowRenderer.render(<SomeComponent />);181    expect(result.type).toBe('div');182    expect(result.props.children).toEqual([183      <span className="child1" />,184      <span className="child2" />,185    ]);186  });187  it('should handle Profiler', () => {188    const SomeComponent = React.memo(189      class SomeComponent extends React.Component {190        render() {191          return (192            <React.Profiler id="test" onRender={jest.fn()}>193              <div>194                <span className="child1" />195                <span className="child2" />196              </div>197            </React.Profiler>198          );199        }200      },201    );202    const shallowRenderer = createRenderer();203    const result = shallowRenderer.render(<SomeComponent />);204    expect(result.type).toBe(React.Profiler);205    expect(result.props.children).toEqual(206      <div>207        <span className="child1" />208        <span className="child2" />209      </div>,210    );211  });212  it('should enable shouldComponentUpdate to prevent a re-render', () => {213    let renderCounter = 0;214    const SimpleComponent = React.memo(215      class SimpleComponent extends React.Component {216        state = {update: false};217        shouldComponentUpdate(nextProps, nextState) {218          return this.state.update !== nextState.update;219        }220        render() {221          renderCounter++;222          return <div>{`${renderCounter}`}</div>;223        }224      },225    );226    const shallowRenderer = createRenderer();227    shallowRenderer.render(<SimpleComponent />);228    expect(shallowRenderer.getRenderOutput()).toEqual(<div>1</div>);229    const instance = shallowRenderer.getMountedInstance();230    instance.setState({update: false});231    expect(shallowRenderer.getRenderOutput()).toEqual(<div>1</div>);232    instance.setState({update: true});233    expect(shallowRenderer.getRenderOutput()).toEqual(<div>2</div>);234  });235  it('should enable PureComponent to prevent a re-render', () => {236    let renderCounter = 0;237    const SimpleComponent = React.memo(238      class SimpleComponent extends React.PureComponent {239        state = {update: false};240        render() {241          renderCounter++;242          return <div>{`${renderCounter}`}</div>;243        }244      },245    );246    const shallowRenderer = createRenderer();247    shallowRenderer.render(<SimpleComponent />);248    expect(shallowRenderer.getRenderOutput()).toEqual(<div>1</div>);249    const instance = shallowRenderer.getMountedInstance();250    instance.setState({update: false});251    expect(shallowRenderer.getRenderOutput()).toEqual(<div>1</div>);252    instance.setState({update: true});253    expect(shallowRenderer.getRenderOutput()).toEqual(<div>2</div>);254  });255  it('should not run shouldComponentUpdate during forced update', () => {256    let scuCounter = 0;257    const SimpleComponent = React.memo(258      class SimpleComponent extends React.Component {259        state = {count: 1};260        shouldComponentUpdate() {261          scuCounter++;262          return false;263        }264        render() {265          return <div>{`${this.state.count}`}</div>;266        }267      },268    );269    const shallowRenderer = createRenderer();270    shallowRenderer.render(<SimpleComponent />);271    expect(scuCounter).toEqual(0);272    expect(shallowRenderer.getRenderOutput()).toEqual(<div>1</div>);273    // Force update the initial state. sCU should not fire.274    const instance = shallowRenderer.getMountedInstance();275    instance.forceUpdate();276    expect(scuCounter).toEqual(0);277    expect(shallowRenderer.getRenderOutput()).toEqual(<div>1</div>);278    // Setting state updates the instance, but doesn't re-render279    // because sCU returned false.280    instance.setState(state => ({count: state.count + 1}));281    expect(scuCounter).toEqual(1);282    expect(instance.state.count).toEqual(2);283    expect(shallowRenderer.getRenderOutput()).toEqual(<div>1</div>);284    // A force update updates the render output, but doesn't call sCU.285    instance.forceUpdate();286    expect(scuCounter).toEqual(1);287    expect(instance.state.count).toEqual(2);288    expect(shallowRenderer.getRenderOutput()).toEqual(<div>2</div>);289  });290  it('should rerender when calling forceUpdate', () => {291    let renderCounter = 0;292    const SimpleComponent = React.memo(293      class SimpleComponent extends React.Component {294        render() {295          renderCounter += 1;296          return <div />;297        }298      },299    );300    const shallowRenderer = createRenderer();301    shallowRenderer.render(<SimpleComponent />);302    expect(renderCounter).toEqual(1);303    const instance = shallowRenderer.getMountedInstance();304    instance.forceUpdate();305    expect(renderCounter).toEqual(2);306  });307  it('should shallow render a function component', () => {308    function SomeComponent(props, context) {309      return (310        <div>311          <div>{props.foo}</div>312          <div>{context.bar}</div>313          <span className="child1" />314          <span className="child2" />315        </div>316      );317    }318    const SomeMemoComponent = React.memo(SomeComponent);319    SomeComponent.contextTypes = {320      bar: PropTypes.string,321    };322    const shallowRenderer = createRenderer();323    const result = shallowRenderer.render(<SomeMemoComponent foo={'FOO'} />, {324      bar: 'BAR',325    });326    expect(result.type).toBe('div');327    expect(result.props.children).toEqual([328      <div>FOO</div>,329      <div>BAR</div>,330      <span className="child1" />,331      <span className="child2" />,332    ]);333  });334  it('should shallow render a component returning strings directly from render', () => {335    const Text = React.memo(({value}) => value);336    const shallowRenderer = createRenderer();337    const result = shallowRenderer.render(<Text value="foo" />);338    expect(result).toEqual('foo');339  });340  it('should shallow render a component returning numbers directly from render', () => {341    const Text = React.memo(({value}) => value);342    const shallowRenderer = createRenderer();343    const result = shallowRenderer.render(<Text value={10} />);344    expect(result).toEqual(10);345  });346  it('should shallow render a fragment', () => {347    class SomeComponent extends React.Component {348      render() {349        return <div />;350      }351    }352    class Fragment extends React.Component {353      render() {354        return [<div key="a" />, <span key="b" />, <SomeComponent />];355      }356    }357    const shallowRenderer = createRenderer();358    const result = shallowRenderer.render(<Fragment />);359    expect(result).toEqual([360      <div key="a" />,361      <span key="b" />,362      <SomeComponent />,363    ]);364  });365  it('should shallow render a React.fragment', () => {366    class SomeComponent extends React.Component {367      render() {368        return <div />;369      }370    }371    class Fragment extends React.Component {372      render() {373        return (374          <React.Fragment>375            <div />376            <span />377            <SomeComponent />378          </React.Fragment>379        );380      }381    }382    const shallowRenderer = createRenderer();383    const result = shallowRenderer.render(<Fragment />);384    expect(result).toEqual(385      <React.Fragment>386        <div />387        <span />388        <SomeComponent />389      </React.Fragment>,390    );391  });392  it('should throw for invalid elements', () => {393    class SomeComponent extends React.Component {394      render() {395        return <div />;396      }397    }398    const shallowRenderer = createRenderer();399    expect(() => shallowRenderer.render(SomeComponent)).toThrowError(400      'ReactShallowRenderer render(): Invalid component element. Instead of ' +401        'passing a component class, make sure to instantiate it by passing it ' +402        'to React.createElement.',403    );404    expect(() => shallowRenderer.render(<div />)).toThrowError(405      'ReactShallowRenderer render(): Shallow rendering works only with ' +406        'custom components, not primitives (div). Instead of calling ' +407        '`.render(el)` and inspecting the rendered output, look at `el.props` ' +408        'directly instead.',409    );410  });411  it('should have shallow unmounting', () => {412    const componentWillUnmount = jest.fn();413    class SomeComponent extends React.Component {414      componentWillUnmount = componentWillUnmount;415      render() {416        return <div />;417      }418    }419    const shallowRenderer = createRenderer();420    shallowRenderer.render(<SomeComponent />);421    shallowRenderer.unmount();422    expect(componentWillUnmount).toBeCalled();423  });424  it('can shallow render to null', () => {425    class SomeComponent extends React.Component {426      render() {427        return null;428      }429    }430    const shallowRenderer = createRenderer();431    const result = shallowRenderer.render(<SomeComponent />);432    expect(result).toBe(null);433  });434  it('can shallow render with a ref', () => {435    class SomeComponent extends React.Component {436      render() {437        return <div ref="hello" />;438      }439    }440    const shallowRenderer = createRenderer();441    // Shouldn't crash.442    shallowRenderer.render(<SomeComponent />);443  });444  it('lets you update shallowly rendered components', () => {445    class SomeComponent extends React.Component {446      state = {clicked: false};447      onClick = () => {448        this.setState({clicked: true});449      };450      render() {451        const className = this.state.clicked ? 'was-clicked' : '';452        if (this.props.aNew === 'prop') {453          return (454            <a href="#" onClick={this.onClick} className={className}>455              Test link456            </a>457          );458        } else {459          return (460            <div>461              <span className="child1" />462              <span className="child2" />463            </div>464          );465        }466      }467    }468    const shallowRenderer = createRenderer();469    const result = shallowRenderer.render(<SomeComponent />);470    expect(result.type).toBe('div');471    expect(result.props.children).toEqual([472      <span className="child1" />,473      <span className="child2" />,474    ]);475    const updatedResult = shallowRenderer.render(<SomeComponent aNew="prop" />);476    expect(updatedResult.type).toBe('a');477    const mockEvent = {};478    updatedResult.props.onClick(mockEvent);479    const updatedResultCausedByClick = shallowRenderer.getRenderOutput();480    expect(updatedResultCausedByClick.type).toBe('a');481    expect(updatedResultCausedByClick.props.className).toBe('was-clicked');482  });483  it('can access the mounted component instance', () => {484    const SimpleComponent = React.memo(485      class SimpleComponent extends React.Component {486        someMethod = () => {487          return this.props.n;488        };489        render() {490          return <div>{this.props.n}</div>;491        }492      },493    );494    const shallowRenderer = createRenderer();495    shallowRenderer.render(<SimpleComponent n={5} />);496    expect(shallowRenderer.getMountedInstance().someMethod()).toEqual(5);497  });498  it('can shallowly render components with contextTypes', () => {499    const SimpleComponent = React.memo(500      class SimpleComponent extends React.Component {501        static contextTypes = {502          name: PropTypes.string,503        };504        render() {505          return <div />;506        }507      },508    );509    const shallowRenderer = createRenderer();510    const result = shallowRenderer.render(<SimpleComponent />);511    expect(result).toEqual(<div />);512  });513  it('passes expected params to legacy component lifecycle methods', () => {514    const componentDidUpdateParams = [];515    const componentWillReceivePropsParams = [];516    const componentWillUpdateParams = [];517    const setStateParams = [];518    const shouldComponentUpdateParams = [];519    const initialProp = {prop: 'init prop'};520    const initialState = {state: 'init state'};521    const initialContext = {context: 'init context'};522    const updatedState = {state: 'updated state'};523    const updatedProp = {prop: 'updated prop'};524    const updatedContext = {context: 'updated context'};525    const SimpleComponent = React.memo(526      class SimpleComponent extends React.Component {527        constructor(props, context) {528          super(props, context);529          this.state = initialState;530        }531        static contextTypes = {532          context: PropTypes.string,533        };534        componentDidUpdate(...args) {535          componentDidUpdateParams.push(...args);536        }537        UNSAFE_componentWillReceiveProps(...args) {538          componentWillReceivePropsParams.push(...args);539          this.setState((...innerArgs) => {540            setStateParams.push(...innerArgs);541            return updatedState;542          });543        }544        UNSAFE_componentWillUpdate(...args) {545          componentWillUpdateParams.push(...args);546        }547        shouldComponentUpdate(...args) {548          shouldComponentUpdateParams.push(...args);549          return true;550        }551        render() {552          return null;553        }554      },555    );556    const shallowRenderer = createRenderer();557    shallowRenderer.render(558      React.createElement(SimpleComponent, initialProp),559      initialContext,560    );561    expect(componentDidUpdateParams).toEqual([]);562    expect(componentWillReceivePropsParams).toEqual([]);563    expect(componentWillUpdateParams).toEqual([]);564    expect(setStateParams).toEqual([]);565    expect(shouldComponentUpdateParams).toEqual([]);566    // Lifecycle hooks should be invoked with the correct prev/next params on update.567    shallowRenderer.render(568      React.createElement(SimpleComponent, updatedProp),569      updatedContext,570    );571    expect(componentWillReceivePropsParams).toEqual([572      updatedProp,573      updatedContext,574    ]);575    expect(setStateParams).toEqual([initialState, initialProp]);576    expect(shouldComponentUpdateParams).toEqual([577      updatedProp,578      updatedState,579      updatedContext,580    ]);581    expect(componentWillUpdateParams).toEqual([582      updatedProp,583      updatedState,584      updatedContext,585    ]);586    expect(componentDidUpdateParams).toEqual([]);587  });588  it('passes expected params to new component lifecycle methods', () => {589    const componentDidUpdateParams = [];590    const getDerivedStateFromPropsParams = [];591    const shouldComponentUpdateParams = [];592    const initialProp = {prop: 'init prop'};593    const initialState = {state: 'init state'};594    const initialContext = {context: 'init context'};595    const updatedProp = {prop: 'updated prop'};596    const updatedContext = {context: 'updated context'};597    const SimpleComponent = React.memo(598      class SimpleComponent extends React.Component {599        constructor(props, context) {600          super(props, context);601          this.state = initialState;602        }603        static contextTypes = {604          context: PropTypes.string,605        };606        componentDidUpdate(...args) {607          componentDidUpdateParams.push(...args);608        }609        static getDerivedStateFromProps(...args) {610          getDerivedStateFromPropsParams.push(args);611          return null;612        }613        shouldComponentUpdate(...args) {614          shouldComponentUpdateParams.push(...args);615          return true;616        }617        render() {618          return null;619        }620      },621    );622    const shallowRenderer = createRenderer();623    // The only lifecycle hook that should be invoked on initial render624    // Is the static getDerivedStateFromProps() methods625    shallowRenderer.render(626      React.createElement(SimpleComponent, initialProp),627      initialContext,628    );629    expect(getDerivedStateFromPropsParams).toEqual([630      [initialProp, initialState],631    ]);632    expect(componentDidUpdateParams).toEqual([]);633    expect(shouldComponentUpdateParams).toEqual([]);634    // Lifecycle hooks should be invoked with the correct prev/next params on update.635    shallowRenderer.render(636      React.createElement(SimpleComponent, updatedProp),637      updatedContext,638    );639    expect(getDerivedStateFromPropsParams).toEqual([640      [initialProp, initialState],641      [updatedProp, initialState],642    ]);643    expect(shouldComponentUpdateParams).toEqual([644      updatedProp,645      initialState,646      updatedContext,647    ]);648    expect(componentDidUpdateParams).toEqual([]);649  });650  it('can shallowly render components with ref as function', () => {651    const SimpleComponent = React.memo(652      class SimpleComponent extends React.Component {653        state = {clicked: false};654        handleUserClick = () => {655          this.setState({clicked: true});656        };657        render() {658          return (659            <div660              ref={() => {}}661              onClick={this.handleUserClick}662              className={this.state.clicked ? 'clicked' : ''}663            />664          );665        }666      },667    );668    const shallowRenderer = createRenderer();669    shallowRenderer.render(<SimpleComponent />);670    let result = shallowRenderer.getRenderOutput();671    expect(result.type).toEqual('div');672    expect(result.props.className).toEqual('');673    result.props.onClick();674    result = shallowRenderer.getRenderOutput();675    expect(result.type).toEqual('div');676    expect(result.props.className).toEqual('clicked');677  });678  it('can initialize state via static getDerivedStateFromProps', () => {679    const SimpleComponent = React.memo(680      class SimpleComponent extends React.Component {681        state = {682          count: 1,683        };684        static getDerivedStateFromProps(props, prevState) {685          return {686            count: prevState.count + props.incrementBy,687            other: 'foobar',688          };689        }690        render() {691          return (692            <div>{`count:${this.state.count}, other:${this.state.other}`}</div>693          );694        }695      },696    );697    const shallowRenderer = createRenderer();698    const result = shallowRenderer.render(<SimpleComponent incrementBy={2} />);699    expect(result).toEqual(<div>count:3, other:foobar</div>);700  });701  it('can setState in componentWillMount when shallow rendering', () => {702    const SimpleComponent = React.memo(703      class SimpleComponent extends React.Component {704        UNSAFE_componentWillMount() {705          this.setState({groovy: 'doovy'});706        }707        render() {708          return <div>{this.state.groovy}</div>;709        }710      },711    );712    const shallowRenderer = createRenderer();713    const result = shallowRenderer.render(<SimpleComponent />);714    expect(result).toEqual(<div>doovy</div>);715  });716  it('can setState in componentWillMount repeatedly when shallow rendering', () => {717    const SimpleComponent = React.memo(718      class SimpleComponent extends React.Component {719        state = {720          separator: '-',721        };722        UNSAFE_componentWillMount() {723          this.setState({groovy: 'doovy'});724          this.setState({doovy: 'groovy'});725        }726        render() {727          const {groovy, doovy, separator} = this.state;728          return <div>{`${groovy}${separator}${doovy}`}</div>;729        }730      },731    );732    const shallowRenderer = createRenderer();733    const result = shallowRenderer.render(<SimpleComponent />);734    expect(result).toEqual(<div>doovy-groovy</div>);735  });736  it('can setState in componentWillMount with an updater function repeatedly when shallow rendering', () => {737    const SimpleComponent = React.memo(738      class SimpleComponent extends React.Component {739        state = {740          separator: '-',741        };742        UNSAFE_componentWillMount() {743          this.setState(state => ({groovy: 'doovy'}));744          this.setState(state => ({doovy: state.groovy}));745        }746        render() {747          const {groovy, doovy, separator} = this.state;748          return <div>{`${groovy}${separator}${doovy}`}</div>;749        }750      },751    );752    const shallowRenderer = createRenderer();753    const result = shallowRenderer.render(<SimpleComponent />);754    expect(result).toEqual(<div>doovy-doovy</div>);755  });756  it('can setState in componentWillReceiveProps when shallow rendering', () => {757    const SimpleComponent = React.memo(758      class SimpleComponent extends React.Component {759        state = {count: 0};760        UNSAFE_componentWillReceiveProps(nextProps) {761          if (nextProps.updateState) {762            this.setState({count: 1});763          }764        }765        render() {766          return <div>{this.state.count}</div>;767        }768      },769    );770    const shallowRenderer = createRenderer();771    let result = shallowRenderer.render(772      <SimpleComponent updateState={false} />,773    );774    expect(result.props.children).toEqual(0);775    result = shallowRenderer.render(<SimpleComponent updateState={true} />);776    expect(result.props.children).toEqual(1);777  });778  it('can update state with static getDerivedStateFromProps when shallow rendering', () => {779    const SimpleComponent = React.memo(780      class SimpleComponent extends React.Component {781        state = {count: 1};782        static getDerivedStateFromProps(nextProps, prevState) {783          if (nextProps.updateState) {784            return {count: nextProps.incrementBy + prevState.count};785          }786          return null;787        }788        render() {789          return <div>{this.state.count}</div>;790        }791      },792    );793    const shallowRenderer = createRenderer();794    let result = shallowRenderer.render(795      <SimpleComponent updateState={false} incrementBy={0} />,796    );797    expect(result.props.children).toEqual(1);798    result = shallowRenderer.render(799      <SimpleComponent updateState={true} incrementBy={2} />,800    );801    expect(result.props.children).toEqual(3);802    result = shallowRenderer.render(803      <SimpleComponent updateState={false} incrementBy={2} />,804    );805    expect(result.props.children).toEqual(3);806  });807  it('should not override state with stale values if prevState is spread within getDerivedStateFromProps', () => {808    const SimpleComponent = React.memo(809      class SimpleComponent extends React.Component {810        state = {value: 0};811        static getDerivedStateFromProps(nextProps, prevState) {812          return {...prevState};813        }814        updateState = () => {815          this.setState(state => ({value: state.value + 1}));816        };817        render() {818          return <div>{`value:${this.state.value}`}</div>;819        }820      },821    );822    const shallowRenderer = createRenderer();823    let result = shallowRenderer.render(<SimpleComponent />);824    expect(result).toEqual(<div>value:0</div>);825    let instance = shallowRenderer.getMountedInstance();826    instance.updateState();827    result = shallowRenderer.getRenderOutput();828    expect(result).toEqual(<div>value:1</div>);829  });830  it('should pass previous state to shouldComponentUpdate even with getDerivedStateFromProps', () => {831    const SimpleComponent = React.memo(832      class SimpleComponent extends React.Component {833        constructor(props) {834          super(props);835          this.state = {836            value: props.value,837          };838        }839        static getDerivedStateFromProps(nextProps, prevState) {840          if (nextProps.value === prevState.value) {841            return null;842          }843          return {value: nextProps.value};844        }845        shouldComponentUpdate(nextProps, nextState) {846          return nextState.value !== this.state.value;847        }848        render() {849          return <div>{`value:${this.state.value}`}</div>;850        }851      },852    );853    const shallowRenderer = createRenderer();854    const initialResult = shallowRenderer.render(855      <SimpleComponent value="initial" />,856    );857    expect(initialResult).toEqual(<div>value:initial</div>);858    const updatedResult = shallowRenderer.render(859      <SimpleComponent value="updated" />,860    );861    expect(updatedResult).toEqual(<div>value:updated</div>);862  });863  it('can setState with an updater function', () => {864    let instance;865    const SimpleComponent = React.memo(866      class SimpleComponent extends React.Component {867        state = {868          counter: 0,869        };870        render() {871          instance = this;872          return (873            <button ref="button" onClick={this.onClick}>874              {this.state.counter}875            </button>876          );877        }878      },879    );880    const shallowRenderer = createRenderer();881    let result = shallowRenderer.render(<SimpleComponent defaultCount={1} />);882    expect(result.props.children).toEqual(0);883    instance.setState((state, props) => {884      return {counter: props.defaultCount + 1};885    });886    result = shallowRenderer.getRenderOutput();887    expect(result.props.children).toEqual(2);888  });889  it('can access component instance from setState updater function', done => {890    let instance;891    const SimpleComponent = React.memo(892      class SimpleComponent extends React.Component {893        state = {};894        render() {895          instance = this;896          return null;897        }898      },899    );900    const shallowRenderer = createRenderer();901    shallowRenderer.render(<SimpleComponent />);902    instance.setState(function updater(state, props) {903      expect(this).toBe(instance);904      done();905    });906  });907  it('can setState with a callback', () => {908    let instance;909    const SimpleComponent = React.memo(910      class SimpleComponent extends React.Component {911        state = {912          counter: 0,913        };914        render() {915          instance = this;916          return <p>{this.state.counter}</p>;917        }918      },919    );920    const shallowRenderer = createRenderer();921    const result = shallowRenderer.render(<SimpleComponent />);922    expect(result.props.children).toBe(0);923    const callback = jest.fn(function() {924      expect(this).toBe(instance);925    });926    instance.setState({counter: 1}, callback);927    const updated = shallowRenderer.getRenderOutput();928    expect(updated.props.children).toBe(1);929    expect(callback).toHaveBeenCalled();930  });931  it('can replaceState with a callback', () => {932    let instance;933    const SimpleComponent = React.memo(934      class SimpleComponent extends React.Component {935        state = {936          counter: 0,937        };938        render() {939          instance = this;940          return <p>{this.state.counter}</p>;941        }942      },943    );944    const shallowRenderer = createRenderer();945    const result = shallowRenderer.render(<SimpleComponent />);946    expect(result.props.children).toBe(0);947    const callback = jest.fn(function() {948      expect(this).toBe(instance);949    });950    // No longer a public API, but we can test that it works internally by951    // reaching into the updater.952    shallowRenderer._updater.enqueueReplaceState(953      instance,954      {counter: 1},955      callback,956    );957    const updated = shallowRenderer.getRenderOutput();958    expect(updated.props.children).toBe(1);959    expect(callback).toHaveBeenCalled();960  });961  it('can forceUpdate with a callback', () => {962    let instance;963    const SimpleComponent = React.memo(964      class SimpleComponent extends React.Component {965        state = {966          counter: 0,967        };968        render() {969          instance = this;970          return <p>{this.state.counter}</p>;971        }972      },973    );974    const shallowRenderer = createRenderer();975    const result = shallowRenderer.render(<SimpleComponent />);976    expect(result.props.children).toBe(0);977    const callback = jest.fn(function() {978      expect(this).toBe(instance);979    });980    instance.forceUpdate(callback);981    const updated = shallowRenderer.getRenderOutput();982    expect(updated.props.children).toBe(0);983    expect(callback).toHaveBeenCalled();984  });985  it('can pass context when shallowly rendering', () => {986    const SimpleComponent = React.memo(987      class SimpleComponent extends React.Component {988        static contextTypes = {989          name: PropTypes.string,990        };991        render() {992          return <div>{this.context.name}</div>;993        }994      },995    );996    const shallowRenderer = createRenderer();997    const result = shallowRenderer.render(<SimpleComponent />, {998      name: 'foo',999    });1000    expect(result).toEqual(<div>foo</div>);1001  });1002  it('should track context across updates', () => {1003    const SimpleComponent = React.memo(1004      class SimpleComponent extends React.Component {1005        static contextTypes = {1006          foo: PropTypes.string,1007        };1008        state = {1009          bar: 'bar',1010        };1011        render() {1012          return <div>{`${this.context.foo}:${this.state.bar}`}</div>;1013        }1014      },1015    );1016    const shallowRenderer = createRenderer();1017    let result = shallowRenderer.render(<SimpleComponent />, {1018      foo: 'foo',1019    });1020    expect(result).toEqual(<div>foo:bar</div>);1021    const instance = shallowRenderer.getMountedInstance();1022    instance.setState({bar: 'baz'});1023    result = shallowRenderer.getRenderOutput();1024    expect(result).toEqual(<div>foo:baz</div>);1025  });1026  it('should filter context by contextTypes', () => {1027    const SimpleComponent = React.memo(1028      class SimpleComponent extends React.Component {1029        static contextTypes = {1030          foo: PropTypes.string,1031        };1032        render() {1033          return <div>{`${this.context.foo}:${this.context.bar}`}</div>;1034        }1035      },1036    );1037    const shallowRenderer = createRenderer();1038    let result = shallowRenderer.render(<SimpleComponent />, {1039      foo: 'foo',1040      bar: 'bar',1041    });1042    expect(result).toEqual(<div>foo:undefined</div>);1043  });1044  it('can fail context when shallowly rendering', () => {1045    const SimpleComponent = React.memo(1046      class SimpleComponent extends React.Component {1047        static contextTypes = {1048          name: PropTypes.string.isRequired,1049        };1050        render() {1051          return <div>{this.context.name}</div>;1052        }1053      },1054    );1055    const shallowRenderer = createRenderer();1056    expect(() => shallowRenderer.render(<SimpleComponent />)).toWarnDev(1057      'Warning: Failed context type: The context `name` is marked as ' +1058        'required in `SimpleComponent`, but its value is `undefined`.\n' +1059        '    in SimpleComponent (at **)',1060    );1061  });1062  it('should warn about propTypes (but only once)', () => {1063    const SimpleComponent = React.memo(1064      class SimpleComponent extends React.Component {1065        static propTypes = {1066          name: PropTypes.string.isRequired,1067        };1068        render() {1069          return React.createElement('div', null, this.props.name);1070        }1071      },1072    );1073    const shallowRenderer = createRenderer();1074    expect(() =>1075      shallowRenderer.render(React.createElement(SimpleComponent, {name: 123})),1076    ).toWarnDev(1077      'Warning: Failed prop type: Invalid prop `name` of type `number` ' +1078        'supplied to `SimpleComponent`, expected `string`.\n' +1079        '    in SimpleComponent',1080    );1081  });1082  it('should enable rendering of cloned element', () => {1083    const SimpleComponent = React.memo(1084      class SimpleComponent extends React.Component {1085        constructor(props) {1086          super(props);1087          this.state = {1088            bar: 'bar',1089          };1090        }1091        render() {1092          return <div>{`${this.props.foo}:${this.state.bar}`}</div>;1093        }1094      },1095    );1096    const shallowRenderer = createRenderer();1097    const el = <SimpleComponent foo="foo" />;1098    let result = shallowRenderer.render(el);1099    expect(result).toEqual(<div>foo:bar</div>);1100    const cloned = React.cloneElement(el, {foo: 'baz'});1101    result = shallowRenderer.render(cloned);1102    expect(result).toEqual(<div>baz:bar</div>);1103  });1104  it('this.state should be updated on setState callback inside componentWillMount', () => {1105    let stateSuccessfullyUpdated = false;1106    const Component = React.memo(1107      class Component extends React.Component {1108        constructor(props, context) {1109          super(props, context);1110          this.state = {1111            hasUpdatedState: false,1112          };1113        }1114        UNSAFE_componentWillMount() {1115          this.setState(1116            {hasUpdatedState: true},1117            () => (stateSuccessfullyUpdated = this.state.hasUpdatedState),1118          );1119        }1120        render() {1121          return <div>{this.props.children}</div>;1122        }1123      },1124    );1125    const shallowRenderer = createRenderer();1126    shallowRenderer.render(<Component />);1127    expect(stateSuccessfullyUpdated).toBe(true);1128  });1129  it('should handle multiple callbacks', () => {1130    const mockFn = jest.fn();1131    const shallowRenderer = createRenderer();1132    const Component = React.memo(1133      class Component extends React.Component {1134        constructor(props, context) {1135          super(props, context);1136          this.state = {1137            foo: 'foo',1138          };1139        }1140        UNSAFE_componentWillMount() {1141          this.setState({foo: 'bar'}, () => mockFn());1142          this.setState({foo: 'foobar'}, () => mockFn());1143        }1144        render() {1145          return <div>{this.state.foo}</div>;1146        }1147      },1148    );1149    shallowRenderer.render(<Component />);1150    expect(mockFn).toHaveBeenCalledTimes(2);1151    // Ensure the callback queue is cleared after the callbacks are invoked1152    const mountedInstance = shallowRenderer.getMountedInstance();1153    mountedInstance.setState({foo: 'bar'}, () => mockFn());1154    expect(mockFn).toHaveBeenCalledTimes(3);1155  });1156  it('should call the setState callback even if shouldComponentUpdate = false', done => {1157    const mockFn = jest.fn().mockReturnValue(false);1158    const Component = React.memo(1159      class Component extends React.Component {1160        constructor(props, context) {1161          super(props, context);1162          this.state = {1163            hasUpdatedState: false,1164          };1165        }1166        shouldComponentUpdate() {1167          return mockFn();1168        }1169        render() {1170          return <div>{this.state.hasUpdatedState}</div>;1171        }1172      },1173    );1174    const shallowRenderer = createRenderer();1175    shallowRenderer.render(<Component />);1176    const mountedInstance = shallowRenderer.getMountedInstance();1177    mountedInstance.setState({hasUpdatedState: true}, () => {1178      expect(mockFn).toBeCalled();1179      expect(mountedInstance.state.hasUpdatedState).toBe(true);1180      done();1181    });1182  });1183  it('throws usefully when rendering badly-typed elements', () => {1184    const shallowRenderer = createRenderer();1185    const renderAndVerifyWarningAndError = (Component, typeString) => {1186      expect(() => {1187        expect(() => shallowRenderer.render(<Component />)).toWarnDev(1188          'React.createElement: type is invalid -- expected a string ' +1189            '(for built-in components) or a class/function (for composite components) ' +1190            `but got: ${typeString}.`,1191        );1192      }).toThrowError(1193        'ReactShallowRenderer render(): Shallow rendering works only with custom ' +1194          `components, but the provided element type was \`${typeString}\`.`,1195      );1196    };1197    renderAndVerifyWarningAndError(undefined, 'undefined');1198    renderAndVerifyWarningAndError(null, 'null');1199    renderAndVerifyWarningAndError([], 'array');1200    renderAndVerifyWarningAndError({}, 'object');1201  });1202  it('should have initial state of null if not defined', () => {1203    const SomeComponent = React.memo(1204      class SomeComponent extends React.Component {1205        render() {1206          return <span />;1207        }1208      },1209    );1210    const shallowRenderer = createRenderer();1211    shallowRenderer.render(<SomeComponent />);1212    expect(shallowRenderer.getMountedInstance().state).toBeNull();1213  });1214  it('should invoke both deprecated and new lifecycles if both are present', () => {1215    const log = [];1216    const Component = React.memo(1217      class Component extends React.Component {1218        componentWillMount() {1219          log.push('componentWillMount');1220        }1221        componentWillReceiveProps() {1222          log.push('componentWillReceiveProps');1223        }1224        componentWillUpdate() {1225          log.push('componentWillUpdate');1226        }1227        UNSAFE_componentWillMount() {1228          log.push('UNSAFE_componentWillMount');1229        }1230        UNSAFE_componentWillReceiveProps() {1231          log.push('UNSAFE_componentWillReceiveProps');1232        }1233        UNSAFE_componentWillUpdate() {1234          log.push('UNSAFE_componentWillUpdate');1235        }1236        render() {1237          return null;1238        }1239      },1240    );1241    const shallowRenderer = createRenderer();1242    shallowRenderer.render(<Component foo="bar" />);1243    expect(log).toEqual(['componentWillMount', 'UNSAFE_componentWillMount']);1244    log.length = 0;1245    shallowRenderer.render(<Component foo="baz" />);1246    expect(log).toEqual([1247      'componentWillReceiveProps',1248      'UNSAFE_componentWillReceiveProps',1249      'componentWillUpdate',1250      'UNSAFE_componentWillUpdate',1251    ]);1252  });1253  it('should stop the update when setState returns null or undefined', () => {1254    const log = [];1255    let instance;1256    const Component = React.memo(1257      class Component extends React.Component {1258        constructor(props) {1259          super(props);1260          this.state = {1261            count: 0,1262          };1263        }1264        render() {1265          log.push('render');1266          instance = this;1267          return null;1268        }1269      },1270    );1271    const shallowRenderer = createRenderer();1272    shallowRenderer.render(<Component />);1273    log.length = 0;1274    instance.setState(() => null);1275    instance.setState(() => undefined);1276    instance.setState(null);1277    instance.setState(undefined);1278    expect(log).toEqual([]);1279    instance.setState(state => ({count: state.count + 1}));1280    expect(log).toEqual(['render']);1281  });1282  it('should not get this in a function component', () => {1283    const logs = [];1284    const Foo = React.memo(function Foo() {1285      logs.push(this);1286      return <div>foo</div>;1287    });1288    const shallowRenderer = createRenderer();1289    shallowRenderer.render(<Foo foo="bar" />);1290    expect(logs).toEqual([undefined]);1291  });...

ReactShallowRendererHooks-test.js

Source:ReactShallowRendererHooks-test.js

1/**2 * Copyright (c) Facebook, Inc. and its affiliates.3 *4 * This source code is licensed under the MIT license found in the5 * LICENSE file in the root directory of this source tree.6 *7 * @emails react-core8 * @jest-environment node9 */10'use strict';11let createRenderer;12let React;13describe('ReactShallowRenderer with hooks', () => {14  beforeEach(() => {15    jest.resetModules();16    createRenderer = require('react-test-renderer/shallow').createRenderer;17    React = require('react');18  });19  it('should work with useState', () => {20    function SomeComponent({defaultName}) {21      const [name] = React.useState(defaultName);22      return (23        <div>24          <p>25            Your name is: <span>{name}</span>26          </p>27        </div>28      );29    }30    const shallowRenderer = createRenderer();31    let result = shallowRenderer.render(32      <SomeComponent defaultName={'Dominic'} />,33    );34    expect(result).toEqual(35      <div>36        <p>37          Your name is: <span>Dominic</span>38        </p>39      </div>,40    );41    result = shallowRenderer.render(42      <SomeComponent defaultName={'Should not use this name'} />,43    );44    expect(result).toEqual(45      <div>46        <p>47          Your name is: <span>Dominic</span>48        </p>49      </div>,50    );51  });52  it('should work with updating a value from useState', () => {53    function SomeComponent({defaultName}) {54      const [name, updateName] = React.useState(defaultName);55      if (name !== 'Dan') {56        updateName('Dan');57      }58      return (59        <div>60          <p>61            Your name is: <span>{name}</span>62          </p>63        </div>64      );65    }66    const shallowRenderer = createRenderer();67    const result = shallowRenderer.render(68      <SomeComponent defaultName={'Dominic'} />,69    );70    expect(result).toEqual(71      <div>72        <p>73          Your name is: <span>Dan</span>74        </p>75      </div>,76    );77  });78  it('should work with updating a derived value from useState', () => {79    let _updateName;80    function SomeComponent({defaultName}) {81      const [name, updateName] = React.useState(defaultName);82      const [prevName, updatePrevName] = React.useState(defaultName);83      const [letter, updateLetter] = React.useState(name[0]);84      _updateName = updateName;85      if (name !== prevName) {86        updatePrevName(name);87        updateLetter(name[0]);88      }89      return (90        <div>91          <p>92            Your name is: <span>{name + ' (' + letter + ')'}</span>93          </p>94        </div>95      );96    }97    const shallowRenderer = createRenderer();98    let result = shallowRenderer.render(99      <SomeComponent defaultName={'Sophie'} />,100    );101    expect(result).toEqual(102      <div>103        <p>104          Your name is: <span>Sophie (S)</span>105        </p>106      </div>,107    );108    result = shallowRenderer.render(<SomeComponent defaultName={'Dan'} />);109    expect(result).toEqual(110      <div>111        <p>112          Your name is: <span>Sophie (S)</span>113        </p>114      </div>,115    );116    _updateName('Dan');117    expect(shallowRenderer.getRenderOutput()).toEqual(118      <div>119        <p>120          Your name is: <span>Dan (D)</span>121        </p>122      </div>,123    );124  });125  it('should work with useReducer', () => {126    function reducer(state, action) {127      switch (action.type) {128        case 'increment':129          return {count: state.count + 1};130        case 'decrement':131          return {count: state.count - 1};132      }133    }134    function SomeComponent(props) {135      const [state] = React.useReducer(reducer, props, p => ({136        count: p.initialCount,137      }));138      return (139        <div>140          <p>141            The counter is at: <span>{state.count.toString()}</span>142          </p>143        </div>144      );145    }146    const shallowRenderer = createRenderer();147    let result = shallowRenderer.render(<SomeComponent initialCount={0} />);148    expect(result).toEqual(149      <div>150        <p>151          The counter is at: <span>0</span>152        </p>153      </div>,154    );155    result = shallowRenderer.render(<SomeComponent initialCount={10} />);156    expect(result).toEqual(157      <div>158        <p>159          The counter is at: <span>0</span>160        </p>161      </div>,162    );163  });164  it('should work with a dispatched state change for a useReducer', () => {165    function reducer(state, action) {166      switch (action.type) {167        case 'increment':168          return {count: state.count + 1};169        case 'decrement':170          return {count: state.count - 1};171      }172    }173    function SomeComponent(props) {174      const [state, dispatch] = React.useReducer(reducer, props, p => ({175        count: p.initialCount,176      }));177      if (state.count === 0) {178        dispatch({type: 'increment'});179      }180      return (181        <div>182          <p>183            The counter is at: <span>{state.count.toString()}</span>184          </p>185        </div>186      );187    }188    const shallowRenderer = createRenderer();189    let result = shallowRenderer.render(<SomeComponent initialCount={0} />);190    expect(result).toEqual(191      <div>192        <p>193          The counter is at: <span>1</span>194        </p>195      </div>,196    );197  });198  it('should not trigger effects', () => {199    let effectsCalled = [];200    function SomeComponent({defaultName}) {201      React.useEffect(() => {202        effectsCalled.push('useEffect');203      });204      React.useLayoutEffect(() => {205        effectsCalled.push('useEffect');206      });207      return <div>Hello world</div>;208    }209    const shallowRenderer = createRenderer();210    shallowRenderer.render(<SomeComponent />);211    expect(effectsCalled).toEqual([]);212  });213  it('should work with useRef', () => {214    function SomeComponent() {215      const randomNumberRef = React.useRef({number: Math.random()});216      return (217        <div>218          <p>The random number is: {randomNumberRef.current.number}</p>219        </div>220      );221    }222    const shallowRenderer = createRenderer();223    let firstResult = shallowRenderer.render(<SomeComponent />);224    let secondResult = shallowRenderer.render(<SomeComponent />);225    expect(firstResult).toEqual(secondResult);226  });227  it('should work with useMemo', () => {228    function SomeComponent() {229      const randomNumber = React.useMemo(() => {230        return {number: Math.random()};231      }, []);232      return (233        <div>234          <p>The random number is: {randomNumber.number}</p>235        </div>236      );237    }238    const shallowRenderer = createRenderer();239    let firstResult = shallowRenderer.render(<SomeComponent />);240    let secondResult = shallowRenderer.render(<SomeComponent />);241    expect(firstResult).toEqual(secondResult);242  });243  it('should work with useContext', () => {244    const SomeContext = React.createContext('default');245    function SomeComponent() {246      const value = React.useContext(SomeContext);247      return (248        <div>249          <p>{value}</p>250        </div>251      );252    }253    const shallowRenderer = createRenderer();254    let result = shallowRenderer.render(<SomeComponent />);255    expect(result).toEqual(256      <div>257        <p>default</p>258      </div>,259    );260  });261  it('should not leak state when component type changes', () => {262    function SomeComponent({defaultName}) {263      const [name] = React.useState(defaultName);264      return (265        <div>266          <p>267            Your name is: <span>{name}</span>268          </p>269        </div>270      );271    }272    function SomeOtherComponent({defaultName}) {273      const [name] = React.useState(defaultName);274      return (275        <div>276          <p>277            Your name is: <span>{name}</span>278          </p>279        </div>280      );281    }282    const shallowRenderer = createRenderer();283    let result = shallowRenderer.render(284      <SomeComponent defaultName={'Dominic'} />,285    );286    expect(result).toEqual(287      <div>288        <p>289          Your name is: <span>Dominic</span>290        </p>291      </div>,292    );293    result = shallowRenderer.render(<SomeOtherComponent defaultName={'Dan'} />);294    expect(result).toEqual(295      <div>296        <p>297          Your name is: <span>Dan</span>298        </p>299      </div>,300    );301  });302  it('should work with with forwardRef + any hook', () => {303    const SomeComponent = React.forwardRef((props, ref) => {304      const randomNumberRef = React.useRef({number: Math.random()});305      return (306        <div ref={ref}>307          <p>The random number is: {randomNumberRef.current.number}</p>308        </div>309      );310    });311    const shallowRenderer = createRenderer();312    let firstResult = shallowRenderer.render(<SomeComponent />);313    let secondResult = shallowRenderer.render(<SomeComponent />);314    expect(firstResult).toEqual(secondResult);315  });316  it('should update a value from useState outside the render', () => {317    let _dispatch;318    function SomeComponent({defaultName}) {319      const [count, dispatch] = React.useReducer(320        (s, a) => (a === 'inc' ? s + 1 : s),321        0,322      );323      const [name, updateName] = React.useState(defaultName);324      _dispatch = () => dispatch('inc');325      return (326        <div onClick={() => updateName('Dan')}>327          <p>328            Your name is: <span>{name}</span> ({count})329          </p>330        </div>331      );332    }333    const shallowRenderer = createRenderer();334    const element = <SomeComponent defaultName={'Dominic'} />;335    const result = shallowRenderer.render(element);336    expect(result.props.children).toEqual(337      <p>338        Your name is: <span>Dominic</span> ({0})339      </p>,340    );341    result.props.onClick();342    let updated = shallowRenderer.render(element);343    expect(updated.props.children).toEqual(344      <p>345        Your name is: <span>Dan</span> ({0})346      </p>,347    );348    _dispatch('foo');349    updated = shallowRenderer.render(element);350    expect(updated.props.children).toEqual(351      <p>352        Your name is: <span>Dan</span> ({1})353      </p>,354    );355    _dispatch('inc');356    updated = shallowRenderer.render(element);357    expect(updated.props.children).toEqual(358      <p>359        Your name is: <span>Dan</span> ({2})360      </p>,361    );362  });363  it('should ignore a foreign update outside the render', () => {364    let _updateCountForFirstRender;365    function SomeComponent() {366      const [count, updateCount] = React.useState(0);367      if (!_updateCountForFirstRender) {368        _updateCountForFirstRender = updateCount;369      }370      return count;371    }372    const shallowRenderer = createRenderer();373    const element = <SomeComponent />;374    let result = shallowRenderer.render(element);375    expect(result).toEqual(0);376    _updateCountForFirstRender(1);377    result = shallowRenderer.render(element);378    expect(result).toEqual(1);379    shallowRenderer.unmount();380    result = shallowRenderer.render(element);381    expect(result).toEqual(0);382    _updateCountForFirstRender(1); // Should be ignored.383    result = shallowRenderer.render(element);384    expect(result).toEqual(0);385  });386  it('should not forget render phase updates', () => {387    let _updateCount;388    function SomeComponent() {389      const [count, updateCount] = React.useState(0);390      _updateCount = updateCount;391      if (count < 5) {392        updateCount(x => x + 1);393      }394      return count;395    }396    const shallowRenderer = createRenderer();397    const element = <SomeComponent />;398    let result = shallowRenderer.render(element);399    expect(result).toEqual(5);400    _updateCount(10);401    result = shallowRenderer.render(element);402    expect(result).toEqual(10);403    _updateCount(x => x + 1);404    result = shallowRenderer.render(element);405    expect(result).toEqual(11);406    _updateCount(x => x - 10);407    result = shallowRenderer.render(element);408    expect(result).toEqual(5);409  });...

Using AI Code Generation

1import React from 'react';2import { shallow } from 'enzyme';3import { storiesOf } from '@storybook/react';4import { action } from '@storybook/addon-actions';5import { linkTo } from '@storybook/addon-links';6import { Welcome } from '@storybook/react/demo';7import { StorybookRoot } from 'storybook-root';8import { Button } from '@storybook/react/demo';9import { withKnobs, text, boolean, number } from '@storybook/addon-knobs';10storiesOf('Welcome', module).add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);11storiesOf('Button', module)12  .addDecorator(withKnobs)13  .add('with text', () => (14    <Button onClick={action('clicked')}>{text('Label', 'Hello Button')}</Button>15  .add('with some emoji', () => (16    <Button onClick={action('clicked')}>17  .add('with some emoji and action', () => (18    <Button onClick={action('clicked')}>19  ));20storiesOf('StorybookRoot', module).add('with text', () => <StorybookRoot />);21import React from 'react';22import { shallow } from 'enzyme';23import { storiesOf } from '@storybook/react';24import { action } from '@storybook/addon-actions';25import { linkTo } from '@storybook/addon-links';26import { Welcome } from '@storybook/react/demo';27import { StorybookRoot } from 'storybook-root';28import { Button } from '@storybook/react/demo';29import { withKnobs, text, boolean, number } from '@storybook/addon-knobs';30storiesOf('Welcome', module).add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);31storiesOf('Button', module)32  .addDecorator(withKnobs)33  .add('with text', () => (34    <Button onClick={action('clicked')}>{text('

Using AI Code Generation

1import React from 'react';2import { shallow } from 'enzyme';3import { shallowRender } from 'storybook-root';4import MyComponent from './MyComponent';5describe('MyComponent', () => {6  it('should render', () => {7    const component = shallowRender(<MyComponent />);8    expect(component).toMatchSnapshot();9  });10});11{12  "scripts": {13  },14  "dependencies": {15  },16  "devDependencies": {17  }18}

Using AI Code Generation

1import React from 'react';2import { shallow } from 'enzyme';3import { shallowRenderer } from 'storybook-root';4import { MyComponent } from './MyComponent';5describe('MyComponent', () => {6  it('should render', () => {7    const component = shallowRenderer(<MyComponent />);8    expect(component).toMatchSnapshot();9  });10});11import React from 'react';12import { shallowRenderer } from 'storybook-root';13export const MyComponent = () => {14  return <div>MyComponent</div>;15};16export default shallowRenderer(MyComponent);17import React from 'react';18import { shallow } from 'enzyme';19export const shallowRenderer = (component) => {20  const wrapper = shallow(component);21  return wrapper;22};23import { configure } from '@storybook/react';24import { setOptions } from '@storybook/addon-options';25import { setDefaults } from '@storybook/addon-info';26import { configureViewport } from '@storybook/addon-viewport';27setOptions({28});29setDefaults({30});31configureViewport({32  viewports: {33    iphone6: {34      styles: {35      },36    },37  },38});39const req = require.context('../src', true, /.stories.js$/);40function loadStories() {41  req.keys().forEach(filename => req(filename));42}43configure(loadStories, module);44import '@storybook/addon-actions/register';45import '@storybook/addon-links/register';46import '@storybook/addon-notes/register';47import '@storybook/addon-knobs/register';48import '@storybook/addon

Using AI Code Generation

1const renderer = new ShallowRenderer();2renderer.render(<App />);3const result = renderer.getRenderOutput();4const wrapper = mount(<App />);5console.log(wrapper.find('div').length);6const wrapper = shallow(<App />);7console.log(wrapper.find('div').length);8const wrapper = render(<App />);9console.log(wrapper.find('div').length);10const wrapper = mount(<App />);11console.log(wrapper.find('div').length);12const wrapper = shallow(<App />);13console.log(wrapper.find('div').length);14const wrapper = render(<App />);15console.log(wrapper.find('div').length);16const wrapper = renderer.create(<App />).toJSON();17console.log(wrapper.find('div').length);18const wrapper = renderer.create(<App />).toJSON();19console.log(wrapper.find('div').length);20const wrapper = renderer.create(<App />).toJSON();21console.log(wrapper.find('div').length);22const wrapper = renderer.create(<App />).toJSON();23console.log(wrapper.find('div').length);24const wrapper = renderer.create(<App />).toJSON();25console.log(wrapper.find('div').length);26const wrapper = renderer.create(<App />).toJSON();27console.log(wrapper.find('div').length);28const wrapper = renderer.create(<App />).toJSON();29console.log(wrapper.find('div').length);30const wrapper = renderer.create(<App />).toJSON();31console.log(wrapper.find('div').length);32const wrapper = renderer.create(<App />).toJSON();33console.log(wrapper.find('div').length);34const wrapper = renderer.create(<App />).toJSON();

Using AI Code Generation

1import React from 'react';2import { shallowRender } from 'storybook-root';3import { expect } from 'chai';4import { spy } from 'sinon';5import MyComponent from './MyComponent';6describe('MyComponent', () => {7  it('should render the component', () => {8    const props = {9      onClick: spy(),10    };11    const component = shallowRender(<MyComponent {...props} />);12    expect(component.find('button').length).to.equal(1);13  });14});

Using AI Code Generation

1import React from 'react';2import { shallowRenderer } from 'storybook-root';3import { expect } from 'chai';4import { mount } from 'enzyme';5import { Link } from 'react-router';6import { Button } from 'react-bootstrap';7import { LinkContainer } from 'react-router-bootstrap';8describe('Link', () => {9  it('should render Link', () => {10    const wrapper = shallowRenderer(<Link />);11    expect(wrapper).to.exist;12  });13  it('should render LinkContainer', () => {14    const wrapper = shallowRenderer(<LinkContainer />);15    expect(wrapper).to.exist;16  });17});18"scripts": {19}20import React from 'react';21import { shallowRenderer } from 'storybook-root';22import { expect } from 'chai';23import { mount } from 'enzyme';24import { Link } from 'react-router';25import { Button } from 'react-bootstrap';26import { LinkContainer } from 'react-router-bootstrap';27describe('Link', () => {28  it('should render Link', () => {29    const wrapper = shallowRenderer(<Link />);30    expect(wrapper).to.exist;31  });32  it('should render LinkContainer', () => {33    const wrapper = shallowRenderer(<LinkContainer />);34    expect(wrapper).to.exist;35  });36});37"scripts": {38}39import React from 'react';40import { shallowRenderer } from 'storybook-root';41import { expect } from 'chai';42import { mount } from 'enzyme';43import { Link } from 'react-router';44import { Button } from 'react-bootstrap';45import { LinkContainer } from 'react-router-bootstrap';46describe('Link', () => {47  it('should render Link', () => {48    const wrapper = shallowRenderer(<Link />);49    expect(wrapper).to.exist;50  });51  it('should render LinkContainer', () => {52    const wrapper = shallowRenderer(<LinkContainer />);53    expect(wrapper).to.exist;54  });55});

Using AI Code Generation

1const renderer = require('./storybook-root').renderer;2const story = require('./storybook-root').story;3describe('Button', () => {4  it('should render correctly', () => {5    renderer.render(story);6    const result = renderer.getRenderOutput();7    expect(result.type).toBe('button');8    expect(result.props.children).toBe('Hello');9  });10});11import React from 'react';12import { shallow } from 'enzyme';13import { storiesOf } from '@storybook/react';14import { action } from '@storybook/addon-actions';15import Button from './Button';16storiesOf('Button', module)17  .add('with text', () => (18    <Button onClick={action('clicked')}>Hello Button</Button>19  .add('with some emoji', () => (20    <Button onClick={action('clicked')}>😀 😎 👍 💯</Button>21  ));22export const renderer = shallow;23export const story = <Button onClick={action('clicked')}>Hello Button</Button>;24import React from 'react';25import PropTypes from 'prop-types';26const Button = ({ onClick, children }) => (27  <button onClick={onClick}>28    {children}29);30Button.propTypes = {31};32export default Button;

Using AI Code Generation

1import { shallowRenderer } from 'storybook-root';2import { Component } from 'react';3import { shallow } from 'enzyme';4const component = shallowRenderer(Component);5const wrapper = shallow(component);6import { shallowRenderer } from 'storybook-root';7import { Component } from 'react';8import { shallow } from 'enzyme';9const component = shallowRenderer(Component);10const wrapper = shallow(component);11import { shallowRenderer } from 'storybook-root';12import { Component } from 'react';13import { shallow } from 'enzyme';14const component = shallowRenderer(Component);15const wrapper = shallow(component);16import { shallowRenderer } from 'storybook-root';17import { Component } from 'react';18import { shallow } from 'enzyme';19const component = shallowRenderer(Component);20const wrapper = shallow(component);21import { shallowRenderer } from 'storybook-root';22import { Component } from 'react';23import { shallow } from 'enzyme';24const component = shallowRenderer(Component);25const wrapper = shallow(component);26import { shallowRenderer } from 'storybook-root';27import { Component } from 'react';28import { shallow } from 'enzyme';29const component = shallowRenderer(Component);30const wrapper = shallow(component);31import { shallowRenderer } from 'storybook-root';32import { Component } from 'react';33import { shallow } from 'enzyme';34const component = shallowRenderer(Component);35const wrapper = shallow(component);36import { shallowRenderer } from 'storybook-root';37import { Component } from 'react';38import { shallow } from 'enzyme';39const component = shallowRenderer(Component);40const wrapper = shallow(component);

Automation Testing Tutorials

Learn to execute automation testing from scratch with LambdaTest Learning Hub. Right from setting up the prerequisites to run your first automation test, to following best practices and diving deeper into advanced test scenarios. LambdaTest Learning Hubs compile a list of step-by-step guides to help you be proficient with different test automation frameworks i.e. Selenium, Cypress, TestNG etc.