SanCoder-Q · February 8, 2017 03:37 · May 12, 2016 · May 12, 2016 · May 12, 2016 · May 12, 2016
diff --git a/!README.md → !react-enzyme-render-methods.md b/!README.md → !react-enzyme-render-methods.md
diff --git a/!README.md b/!README.md
@@ -0,0 +1 @@
+An exploration of the different render methods available in react-enzyme.
diff --git a/Foo.js b/Foo.js
@@ -1,4 +1,7 @@
-class Foo extends React.Component {
+import React, { Component } from 'react';
+import Bar from './Bar';
+
+class Foo extends Component {
 
     constructor(props) {
         console.log('constructor');

diff --git a/Foo.test.js b/Foo.test.js
@@ -1,67 +1,18 @@
+jest.unmock('./Foo');
+
 import React from 'react';
 import { shallow, mount, render } from 'enzyme';
 import { renderIntoDocument } from 'react-addons-test-utils';
+import Foo from './Foo';
 import Bar from './Bar';
 
 // Jest automocking doesn't work right away with stateless components, i.e. you have to force
 // them to return a renderable value.
-// As it turns out statefull components only work because of a hack in React:
+// As it turns out state*full* components only work because of a hack in React:
 // https://github.com/facebook/react/blob/6b1232aa86415f0573153888a46c4c5cb38974d8/src/renderers/shared/stack/reconciler/ReactCompositeComponent.js#L1103
 Bar.mockImplementation(() => <div className="button" />); // React 0.14
 // Bar.mockImplementation(() => null); // React 15
 
-class Foo extends React.Component {
-
-    constructor(props) {
-        console.log('constructor');
-        super(props);
-        this.state = {
-            foo: 'bar'
-        };
-    }
-
-    componentWillMount() {
-        console.log('componentWillMount');
-    }
-
-    componentDidMount() {
-        console.log('componentDidMount');
-    }
-
-    componentWillReceiveProps() {
-        console.log('componentWillReceiveProps');
-    }
-
-    shouldComponentUpdate() {
-        console.log('shouldComponentUpdate');
-        return true;
-    }
-
-    componentWillUpdate() {
-        console.log('componentWillUpdate');
-    }
-
-    componentDidUpdate() {
-        console.log('componentDidUpdate');
-    }
-
-    componentWillUnmount() {
-        console.log('componentWillUnmount');
-    }
-
-    render() {
-        console.log('render');
-        return (
-            <div>
-                <Button foo="bar">
-                    Hello world
-                </Button>
-            </div>
-        );
-    }
-
-}
-
 Error.stackTraceLimit = 10;
 
 describe('components/Foo', () => {

diff --git a/Foo.js b/Foo.js
@@ -0,0 +1,52 @@
+class Foo extends React.Component {
+
+    constructor(props) {
+        console.log('constructor');
+        super(props);
+        this.state = {
+            foo: 'bar'
+        };
+    }
+
+    componentWillMount() {
+        console.log('componentWillMount');
+    }
+
+    componentDidMount() {
+        console.log('componentDidMount');
+    }
+
+    componentWillReceiveProps() {
+        console.log('componentWillReceiveProps');
+    }
+
+    shouldComponentUpdate() {
+        console.log('shouldComponentUpdate');
+        return true;
+    }
+
+    componentWillUpdate() {
+        console.log('componentWillUpdate');
+    }
+
+    componentDidUpdate() {
+        console.log('componentDidUpdate');
+    }
+
+    componentWillUnmount() {
+        console.log('componentWillUnmount');
+    }
+
+    render() {
+        console.log('render');
+        return (
+            <div>
+                Hello Foo
+                <Bar foo="bar"></Bar>
+            </div>
+        );
+    }
+
+}
+
+export default Foo;
diff --git a/Bar.js b/Bar.js
@@ -0,0 +1,15 @@
+import React from 'react';
+
+function Bar() {
+    return (
+      <div>
+        Hello world,
+        <span>
+          we're not testing Bar so this would ideally not executed
+          through either shallow rendering or Jest's auto mocking.
+        </span>
+      </div>
+    );
+}
+
+export default Bar;
diff --git a/Foo.test.js b/Foo.test.js
@@ -0,0 +1,125 @@
+import React from 'react';
+import { shallow, mount, render } from 'enzyme';
+import { renderIntoDocument } from 'react-addons-test-utils';
+import Bar from './Bar';
+
+// Jest automocking doesn't work right away with stateless components, i.e. you have to force
+// them to return a renderable value.
+// As it turns out statefull components only work because of a hack in React:
+// https://github.com/facebook/react/blob/6b1232aa86415f0573153888a46c4c5cb38974d8/src/renderers/shared/stack/reconciler/ReactCompositeComponent.js#L1103
+Bar.mockImplementation(() => <div className="button" />); // React 0.14
+// Bar.mockImplementation(() => null); // React 15
+
+class Foo extends React.Component {
+
+    constructor(props) {
+        console.log('constructor');
+        super(props);
+        this.state = {
+            foo: 'bar'
+        };
+    }
+
+    componentWillMount() {
+        console.log('componentWillMount');
+    }
+
+    componentDidMount() {
+        console.log('componentDidMount');
+    }
+
+    componentWillReceiveProps() {
+        console.log('componentWillReceiveProps');
+    }
+
+    shouldComponentUpdate() {
+        console.log('shouldComponentUpdate');
+        return true;
+    }
+
+    componentWillUpdate() {
+        console.log('componentWillUpdate');
+    }
+
+    componentDidUpdate() {
+        console.log('componentDidUpdate');
+    }
+
+    componentWillUnmount() {
+        console.log('componentWillUnmount');
+    }
+
+    render() {
+        console.log('render');
+        return (
+            <div>
+                <Button foo="bar">
+                    Hello world
+                </Button>
+            </div>
+        );
+    }
+
+}
+
+Error.stackTraceLimit = 10;
+
+describe('components/Foo', () => {
+
+    describe('rendering methods', () => {
+
+        it('Shallow Rendering - shallow', () => {
+            console.log('Shallow Rendering - shallow');
+            // constructor
+            // componentWillMount
+            // render
+            // setProps()
+            // componentWillReceiveProps
+            // shouldComponentUpdate
+            // componentWillUpdate
+            // render
+            const wrapper = shallow(<Foo />);
+            console.log('setProps()');
+            wrapper.setProps({
+                foo: 'bar'
+            });
+            console.log(wrapper.debug());
+        });
+
+        it('Full DOM Rendering - mount', () => {
+            console.log('Full DOM Rendering - mount');
+            // constructor
+            // componentWillMount
+            // render
+            // componentDidMount
+            // setProps()
+            // componentWillReceiveProps
+            // shouldComponentUpdate
+            // componentWillUpdate
+            // render
+            // componentDidUpdate
+            const wrapper = mount(<Foo />);
+            console.log('setProps()');
+            wrapper.setProps({
+                foo: 'bar'
+            });
+            const button = wrapper.find(Button);
+            expect(button.prop('foo')).toBe('bar');
+            console.log(wrapper.debug());
+
+            // const wasIstDas = renderIntoDocument(<Foo />);
+            // console.log(wasIstDas); // ReactComponentTree?
+        });
+
+        it('Static Rendering API - render', () => {
+            console.log('Static Rendering API - render');
+            // constructor
+            // componentWillMount
+            // render
+            const wrapper = render(<Foo />);
+            console.log(wrapper.html()); // wrapper === Cheerio instance
+        });
+
+    });
+
+});
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		An exploration of the different render methods available in react-enzyme.