React shallow render lifecycle breakdown

README.md

React introduced shallow rendering in 0.13. This is an excellent feature that I wish was included earlier in React. It aims to solve the problem of unit testing components without going through a real, or jsdom mocked, DOM. I couldn't find any info online about what lifecycle events it actually fires. So I did some testing of my own. To reproduce, put component.js and test.js into a folder and run node test.js.

TLDR; shallow rendering only invokes the following lifecycle hooks (in order):

1. getDefaultProps
2. getInitialState
3. componentWillMount stops here until re-render
4. componentWillReceiveProps
5. shouldComponentUpdate
6. componentWillUpdate

component.js

/*eslint node:1 */
'use strict';

var React = require('react');

var Component = React.createClass({
  getDefaultProps: function () { console.log('getDefaultProps fired'); return { another: true }; },
  getInitialState: function () { console.log('getInitialState fired'); return {}; },

  // Life cycle methods
  componentWillMount: function () { console.log('componentWillMount fired'); },
  componentDidMount: function () { console.log('componentDidMount fired'); },
  componentWillReceiveProps: function () { console.log('componentWillReceiveProps fired'); },
  shouldComponentUpdate: function () { console.log('shouldComponentUpdate fired'); return true; },
  componentWillUpdate: function () { console.log('componentWillUpdate fired'); },
  componentDidUpdate: function () { console.log('componentDidUpdate fired'); },
  componentWillUnmount: function () { console.log('componentWillUnmount fired'); },

  render: function() {
    return React.createElement('div');
  }
});

module.exports = Component;

test.js

/*eslint node:1 */
'use strict';

var React = require('react/addons');
var TestUtils = React.addons.TestUtils;
var Component = require('./component');
var shallowRenderer = TestUtils.createRenderer();

var props = { something: true };

// Trigger first render
shallowRenderer.render(React.createElement(Component, props));
shallowRenderer.getRenderOutput();

// Update props
props.something = false;

// Trigger a re-render
shallowRenderer.render(React.createElement(Component, props));
shallowRenderer.getRenderOutput();

Why wouldn't they have it fire all the lifecycle methods? Regardless, thank you for experimenting with this, it certainly saved me a lot of frustration debugging. Maybe one day the official documentation will improve.

Nice thanks.

That's a tricky one. Thanks for the post, so how do we do to test things happening in componentDidMount? Using renderIntoDocument I suppose...

componentWillUnmount will be invoked too after shallowRenderer.unmount() is called.

+1 : how to test componentDidMount? Thanks.

Thanks so much for this. I'm also trying to test componentDidMount without a deep render and was mystified as to why it doesn't get called.

+1 componentDidMount

There use to be a method that grabbed the instance, but in 0.14.6 tag, it doesn't have that method. but if you want to hack it, you can do...

let instance = shallowRenderer._instance._instance;
instance.componentDidMount();

I'd probably avoid shallowRender for this. renderIntoDocument is probably better suited.

@gwing33 - I'm not sure if I understand the context; but the behavior of child components can get in the way if you use renderIntoDocument.

Following up on @gwing33's comment, I believe getMountedInstance() is the name of the method in question. It exists on all >0.15 branches and master. All lifecycle methods should be available through that for manual triggering.