Add tests for own PureComponent implementation

Author: koba04

packages/enzyme-test-suite/package.json

@@ -33,6 +33,7 @@
     "enzyme": "^3.3.0",
     "enzyme-adapter-utils": "^1.5.0",
     "jsdom": "^6.5.1",
+    "lodash.isequal": "^4.5.0",
     "mocha-wrap": "^2.1.2",
     "object.assign": "^4.1.0",
     "object-inspect": "^1.6.0",

packages/enzyme-test-suite/test/ReactWrapper-spec.jsx

@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 import { expect } from 'chai';
 import sinon from 'sinon';
 import wrap from 'mocha-wrap';
+import isEqual from 'lodash.isequal';
 import {
   mount,
   render,
@@ -27,6 +28,7 @@ import {
   createRef,
   Fragment,
   forwardRef,
+  PureComponent,
 } from './_helpers/react-compat';
 import {
   describeWithDOM,
@@ -41,6 +43,7 @@ import {
 } from './_helpers/version';
 import realArrowFunction from './_helpers/realArrowFunction';
 import sloppyReturnThis from './_helpers/untranspiledSloppyReturnThis';
+import { isDeepStrictEqual } from 'util';
 
 const getElementPropSelector = prop => x => x.props[prop];
 const getWrapperPropSelector = prop => x => x.prop(prop);
@@ -5130,7 +5133,7 @@ describeWithDOM('mount', () => {
 
     describeIf(is('>= 15.3'), 'PureComponent', () => {
       it('should not update when state and props did not change', () => {
-        class Foo extends React.PureComponent {
+        class Foo extends PureComponent {
           constructor(props) {
             super(props);
             this.state = {
@@ -5162,6 +5165,44 @@ describeWithDOM('mount', () => {
       });
     });
 
+    describe('Own PureComponent implementation', () => {
+      it('should not update when state and props did not change', () => {
+        class Foo extends React.Component {
+          constructor(props) {
+            super(props);
+            this.state = {
+              foo: 'init',
+            };
+          }
+
+          shouldComponentUpdate(nextProps, nextState) {
+            return !isEqual(this.props, nextProps) || !isEqual(this.state, nextState);
+          }
+
+          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();

packages/enzyme-test-suite/test/ShallowWrapper-spec.jsx

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { expect } from 'chai';
 import sinon from 'sinon';
 import wrap from 'mocha-wrap';
+import isEqual from 'lodash.isequal';
 import {
   shallow,
   render,
@@ -27,6 +28,7 @@ import {
   createRef,
   Fragment,
   forwardRef,
+  PureComponent,
 } from './_helpers/react-compat';
 import {
   describeIf,
@@ -5501,7 +5503,7 @@ describe('shallow', () => {
 
     describeIf(is('>= 15.3'), 'PureComponent', () => {
       it('should not update when state and props did not change', () => {
-        class Foo extends React.PureComponent {
+        class Foo extends PureComponent {
           constructor(props) {
             super(props);
             this.state = {
@@ -5533,6 +5535,44 @@ describe('shallow', () => {
       });
     });
 
+    describe('Own PureComponent implementation', () => {
+      it('should not update when state and props did not change', () => {
+        class Foo extends React.Component {
+          constructor(props) {
+            super(props);
+            this.state = {
+              foo: 'init',
+            };
+          }
+
+          shouldComponentUpdate(nextProps, nextState) {
+            return !isEqual(this.props, nextProps) || !isEqual(this.state, nextState);
+          }
+
+          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();

packages/enzyme-test-suite/test/_helpers/react-compat.js

@@ -16,6 +16,7 @@ let Fragment;
 let StrictMode;
 let AsyncMode;
 let Profiler;
+let PureComponent;
 
 if (is('>=15.5 || ^16.0.0-alpha || ^16.3.0-alpha')) {
   // eslint-disable-next-line import/no-extraneous-dependencies
@@ -37,6 +38,12 @@ if (is('^16.0.0-0 || ^16.3.0-0')) {
   createPortal = null;
 }
 
+if (is('>=15.3')) {
+  ({ PureComponent } = require('react'));
+} else {
+  PureComponent = null;
+}
+
 if (is('^16.2.0-0')) {
   ({ Fragment } = require('react'));
 } else {
@@ -78,4 +85,5 @@ export {
   StrictMode,
   AsyncMode,
   Profiler,
+  PureComponent,
 };