Fix to prevent updates with PureComponent

enzymejs · Aug 22, 2018 · a70fb05 · a70fb05
1 parent 8bc3635
commit a70fb05
Show file tree

Hide file tree

Showing 3 changed files with 79 additions and 0 deletions.
diff --git a/packages/enzyme-test-suite/test/ReactWrapper-spec.jsx b/packages/enzyme-test-suite/test/ReactWrapper-spec.jsx
@@ -5066,6 +5066,40 @@ describeWithDOM('mount', () => {
       });
     });
 
+    describeIf(is('>= 15.3'), 'PureComponent', () => {
+      it('should not update when state and props did not change', () => {
+        class Foo extends React.PureComponent {
+          constructor(props) {
+            super(props);
+            this.state = {
+              foo: 'init',
+            };
+          }
+
+          componentDidUpdate() {}
+
+          render() {
+            return (
+              <div>
+                {this.state.foo}
+              </div>
+            );
+          }
+        }
+        const spy = sinon.spy(Foo.prototype, 'componentDidUpdate');
+        const wrapper = mount(<Foo id={1} />);
+        wrapper.setState({ foo: 'update' });
+        expect(spy).to.have.property('callCount', 1);
+        wrapper.setState({ foo: 'update' });
+        expect(spy).to.have.property('callCount', 1);
+
+        wrapper.setProps({ id: 2 });
+        expect(spy).to.have.property('callCount', 2);
+        wrapper.setProps({ id: 2 });
+        expect(spy).to.have.property('callCount', 2);
+      });
+    });
+
     describeIf(is('>= 16.3'), 'support getSnapshotBeforeUpdate', () => {
       it('should call getSnapshotBeforeUpdate and pass snapshot to componentDidUpdate', () => {
         const spy = sinon.spy();

diff --git a/packages/enzyme-test-suite/test/ShallowWrapper-spec.jsx b/packages/enzyme-test-suite/test/ShallowWrapper-spec.jsx
@@ -5437,6 +5437,40 @@ describe('shallow', () => {
       });
     });
 
+    describeIf(is('>= 15.3'), 'PureComponent', () => {
+      it('should not update when state and props did not change', () => {
+        class Foo extends React.PureComponent {
+          constructor(props) {
+            super(props);
+            this.state = {
+              foo: 'init',
+            };
+          }
+
+          componentDidUpdate() {}
+
+          render() {
+            return (
+              <div>
+                {this.state.foo}
+              </div>
+            );
+          }
+        }
+        const spy = sinon.spy(Foo.prototype, 'componentDidUpdate');
+        const wrapper = shallow(<Foo id={1} />);
+        wrapper.setState({ foo: 'update' });
+        expect(spy).to.have.property('callCount', 1);
+        wrapper.setState({ foo: 'update' });
+        expect(spy).to.have.property('callCount', 1);
+
+        wrapper.setProps({ id: 2 });
+        expect(spy).to.have.property('callCount', 2);
+        wrapper.setProps({ id: 2 });
+        expect(spy).to.have.property('callCount', 2);
+      });
+    });
+
     describeIf(is('>= 16.3'), 'support getSnapshotBeforeUpdate', () => {
       it('should call getSnapshotBeforeUpdate and pass snapshot to componentDidUpdate', () => {
         const spy = sinon.spy();

diff --git a/packages/enzyme/src/ShallowWrapper.js b/packages/enzyme/src/ShallowWrapper.js
@@ -339,6 +339,9 @@ class ShallowWrapper {
             && typeof instance.shouldComponentUpdate === 'function'
           ) {
             spy = spyMethod(instance, 'shouldComponentUpdate');
+          // PureComponent
+          } else if (instance.isPureReactComponent) {
+            shouldRender = !isEqual(prevProps, props) || !isEqual(state, instance.state);
           }
           if (props) this[UNRENDERED] = cloneElement(adapter, this[UNRENDERED], props);
           this[RENDERER].render(this[UNRENDERED], nextContext);
@@ -446,6 +449,11 @@ class ShallowWrapper {
         const prevProps = instance.props;
         const prevState = instance.state;
         const prevContext = instance.context;
+
+        if (typeof state === 'function') {
+          state = state.call(instance, prevState, prevProps);
+        }
+
         // When shouldComponentUpdate returns false we shouldn't call componentDidUpdate.
         // so we spy shouldComponentUpdate to get the result.
         let spy;
@@ -458,6 +466,9 @@ class ShallowWrapper {
           && typeof instance.shouldComponentUpdate === 'function'
         ) {
           spy = spyMethod(instance, 'shouldComponentUpdate');
+        // PureComponent
+        } else if (instance.isPureReactComponent) {
+          shouldRender = !isEqual(prevProps, instance.props) || !isEqual(prevState, state);
         }
         // We don't pass the setState callback here
         // to guarantee to call the callback after finishing the render