jondlm · January 3, 2018 05:59 · Jul 8, 2015 · Jul 8, 2015 · Jul 8, 2015 · Jul 8, 2015
diff --git a/react-shallow-rendering-lifecycle.md → README.md b/react-shallow-rendering-lifecycle.md → README.md
diff --git a/README.md → react-shallow-rendering-lifecycle.md b/README.md → react-shallow-rendering-lifecycle.md
diff --git a/README.md b/README.md
@@ -4,4 +4,7 @@ TLDR; shallow rendering only invokes the following lifecycle hooks (in order):
 
 1. `getDefaultProps`
 2. `getInitialState`
-3. `componentWillMount`
+3. `componentWillMount` _stops here until re-render_
+4. `componentWillReceiveProps`
+5. `shouldComponentUpdate`
+6. `componentWillUpdate`
diff --git a/test.js b/test.js
@@ -8,7 +8,13 @@ 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();
diff --git a/README.md b/README.md
@@ -0,0 +1,7 @@
+React introduced [shallow rendering](http://facebook.github.io/react/docs/test-utils.html#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`
diff --git a/component.js b/component.js
@@ -0,0 +1,24 @@
+/*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;
diff --git a/test.js b/test.js
@@ -0,0 +1,14 @@
+/*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 };
+
+shallowRenderer.render(React.createElement(Component, props));
+
+shallowRenderer.getRenderOutput();
+