CHANGELOG.md

@@ -1,5 +1,15 @@
 # Change Log
 
+## 3.4.1
+
+### Fixes
+
+- @ljharb: `shallow`: `setProps`: merge instead of replace props ([commit](https://github.com/airbnb/enzyme/commit/9b4d0276f57e54be06aca6c3636120b3c4053310))
+
+### Documentation
+
+- @koba04: Fix an adapter table style in README.md and a migration guide ([#1734](https://github.com/airbnb/enzyme/pull/1734))
+
 ## 3.4.0
 
 ### New Stuff
@@ -46,7 +56,7 @@
 - @ljharb: `Utils`: `configuration`: change to named exports. ([commit](https://github.com/airbnb/enzyme/commit/d7f32617e6ea93b739f4e4c3f6228a8e382aeb06))
 - @ljharb: use `array.prototype.flat` ([commit](https://github.com/airbnb/enzyme/commit/e52a02ddac0fab0d1d93fd57d7f073f8bdc850bf))
 
-### Docs
+### Documentation
 
 - @jack-lewin: Clarify dev workflow in CONTRIBUTING.md ([#1207](https://github.com/airbnb/enzyme/pull/1207))
 - @robrichard: Provide migration instructions for `ref(refName)` ([#1470](https://github.com/airbnb/enzyme/pull/1470))

README.md

@@ -43,7 +43,7 @@ React:
 | `enzyme-adapter-react-16` | `^16.4.0-0` |
 | `enzyme-adapter-react-16.3` | `~16.3.0-0` |
 | `enzyme-adapter-react-16.2` | `~16.2` |
-| `enzyme-adapter-react-16.1` | `~16.0.0-0 || ~16.1` |
+| `enzyme-adapter-react-16.1` | `~16.0.0-0 \|\| ~16.1` |
 | `enzyme-adapter-react-15` | `^15.5.0` |
 | `enzyme-adapter-react-15.4` | `15.0.0-0 - 15.4.x` |
 | `enzyme-adapter-react-14` | `^0.14.0` |

docs/guides/migration-from-2-to-3.md

@@ -50,7 +50,7 @@ The list of adapter npm packages for React semver ranges are as follows:
 | `enzyme-adapter-react-16` | `^16.4.0-0` |
 | `enzyme-adapter-react-16.3` | `~16.3.0-0` |
 | `enzyme-adapter-react-16.2` | `~16.2` |
-| `enzyme-adapter-react-16.1` | `~16.0.0-0 || ~16.1` |
+| `enzyme-adapter-react-16.1` | `~16.0.0-0 \|\| ~16.1` |
 | `enzyme-adapter-react-15` | `^15.5.0` |
 | `enzyme-adapter-react-15.4` | `15.0.0-0 - 15.4.x` |
 | `enzyme-adapter-react-14` | `^0.14.0` |

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

@@ -1319,7 +1319,7 @@ describe('shallow', () => {
         render() {
           return (
             <div className={this.props.id}>
-              {this.props.id}
+              {this.props.foo}
             </div>
           );
         }
@@ -1330,6 +1330,144 @@ describe('shallow', () => {
       expect(wrapper.find('.bar')).to.have.lengthOf(1);
     });
 
+    describe.only('merging props', () => {
+      it('merges, not replaces, props when rerendering', () => {
+        class Foo extends React.Component {
+          render() {
+            return (
+              <div className={this.props.id}>
+                {this.props.foo}
+              </div>
+            );
+          }
+        }
+
+        const wrapper = shallow(<Foo id="foo" foo="bar" />);
+
+        expect(wrapper.debug()).to.equal(`
+<div className="foo">
+  bar
+</div>
+        `.trim());
+        expect(wrapper.props()).to.eql({
+          className: 'foo',
+          children: 'bar',
+        });
+        expect(wrapper.instance().props).to.eql({
+          id: 'foo',
+          foo: 'bar',
+        });
+
+        wrapper.setProps({ id: 'bar' });
+
+        expect(wrapper.debug()).to.equal(`
+<div className="bar">
+  bar
+</div>
+        `.trim());
+        expect(wrapper.props()).to.eql({
+          className: 'bar',
+          children: 'bar',
+        });
+        expect(wrapper.instance().props).to.eql({
+          id: 'bar',
+          foo: 'bar',
+        });
+      });
+
+      itIf(is('> 0.13'), 'merges, not replaces, props on SFCs', () => {
+        function Foo({ id, foo }) {
+          return (
+            <div className={id}>
+              {foo}
+            </div>
+          );
+        }
+        const wrapper = shallow(<Foo id="foo" foo="bar" />);
+
+        expect(wrapper.debug()).to.equal(`
+<div className="foo">
+  bar
+</div>
+        `.trim());
+        expect(wrapper.props()).to.eql({
+          className: 'foo',
+          children: 'bar',
+        });
+        if (is('< 16')) {
+          expect(wrapper.instance().props).to.eql({
+            id: 'foo',
+            foo: 'bar',
+          });
+        }
+
+        wrapper.setProps({ id: 'bar' });
+
+        expect(wrapper.debug()).to.equal(`
+<div className="bar">
+  bar
+</div>
+        `.trim());
+        expect(wrapper.props()).to.eql({
+          className: 'bar',
+          children: 'bar',
+        });
+        if (is('< 16')) {
+          expect(wrapper.instance().props).to.eql({
+            id: 'bar',
+            foo: 'bar',
+          });
+        }
+      });
+
+      it('merges, not replaces, props when no rerender is needed', () => {
+        class Foo extends React.Component {
+          shouldComponentUpdate() {
+            return false;
+          }
+
+          render() {
+            return (
+              <div className={this.props.id}>
+                {this.props.foo}
+              </div>
+            );
+          }
+        }
+        const wrapper = shallow(<Foo id="foo" foo="bar" />);
+
+        expect(wrapper.debug()).to.equal(`
+<div className="foo">
+  bar
+</div>
+        `.trim());
+        expect(wrapper.props()).to.eql({
+          className: 'foo',
+          children: 'bar',
+        });
+        expect(wrapper.instance().props).to.eql({
+          id: 'foo',
+          foo: 'bar',
+        });
+
+        wrapper.setProps({ id: 'foo' });
+
+        expect(wrapper.debug()).to.equal(`
+<div className="foo">
+  bar
+</div>
+        `.trim());
+        expect(wrapper.props()).to.eql({
+          className: 'foo',
+          children: 'bar',
+        });
+        expect(wrapper.instance().props).to.eql({
+          id: 'foo',
+          foo: 'bar',
+        });
+      });
+    });
+
     it('should call componentWillReceiveProps for new renders', () => {
       const stateValue = {};
 

packages/enzyme/package.json

@@ -1,6 +1,6 @@
 {
   "name": "enzyme",
-  "version": "3.4.0",
+  "version": "3.4.1",
   "description": "JavaScript Testing utilities for React",
   "homepage": "http://airbnb.io/enzyme/",
   "main": "build",

packages/enzyme/src/ShallowWrapper.js

@@ -358,7 +358,7 @@ class ShallowWrapper {
             }
           // If it doesn't need to rerender, update only its props.
           } else if (props) {
-            instance.props = props;
+            instance.props = (Object.freeze || Object)({ ...instance.props, ...props });
           }
           this.update();
         });