[Tests] .setState(): make shallow and mount tests consistent

enzymejs · Aug 17, 2018 · 7130ed9 · 7130ed9
1 parent 8eabf3b
commit 7130ed9
Show file tree

Hide file tree

Showing 2 changed files with 76 additions and 18 deletions.
diff --git a/packages/enzyme-test-suite/test/ReactWrapper-spec.jsx b/packages/enzyme-test-suite/test/ReactWrapper-spec.jsx
@@ -41,6 +41,9 @@ import sloppyReturnThis from './_helpers/untranspiledSloppyReturnThis';
 const getElementPropSelector = prop => x => x.props[prop];
 const getWrapperPropSelector = prop => x => x.prop(prop);
 
+// some React versions pass undefined as an argument of setState callback.
+const CALLING_SETSTATE_CALLBACK_WITH_UNDEFINED = is('^15.5');
+
 describeWithDOM('mount', () => {
   describe('top level wrapper', () => {
     it('does what i expect', () => {
@@ -2144,30 +2147,47 @@ describeWithDOM('mount', () => {
       }
       const wrapper = mount(<Foo />);
       expect(wrapper.state()).to.eql({ id: 'foo' });
-      wrapper.setState({ id: 'bar' }, () => {
-        expect(wrapper.state()).to.eql({ id: 'bar' });
+      return new Promise((resolve) => {
+        wrapper.setState({ id: 'bar' }, function callback(...args) {
+          expect(wrapper.state()).to.eql({ id: 'bar' });
+          expect(this).to.equal(wrapper.instance());
+          expect(this.state).to.eql({ id: 'bar' });
+          expect(wrapper.find('div').prop('className')).to.eql('bar');
+          expect(args).to.eql(CALLING_SETSTATE_CALLBACK_WITH_UNDEFINED ? [undefined] : []);
+          resolve();
+        });
       });
     });
 
-    it('should throw error when cb is not a function', () => {
-      class Foo extends React.Component {
-        constructor(props) {
-          super(props);
-          this.state = { id: 'foo' };
-        }
+    describeIf(is('> 0.13'), 'stateless function components', () => {
+      it('should throw when trying to access state', () => {
+        const Foo = () => (
+          <div>abc</div>
+        );
 
-        render() {
-          return (
-            <div className={this.state.id} />
-          );
-        }
-      }
-      const wrapper = mount(<Foo />);
-      expect(wrapper.state()).to.eql({ id: 'foo' });
-      expect(() => wrapper.setState({ id: 'bar' }, 1)).to.throw(Error);
+        const wrapper = mount(<Foo />);
+
+        expect(() => wrapper.state()).to.throw(
+          Error,
+          'ReactWrapper::state() can only be called on class components',
+        );
+      });
+
+      it('should throw when trying to set state', () => {
+        const Foo = () => (
+          <div>abc</div>
+        );
+
+        const wrapper = mount(<Foo />);
+
+        expect(() => wrapper.setState({ a: 1 })).to.throw(
+          Error,
+          'ReactWrapper::setState() can only be called on class components',
+        );
+      });
     });
 
-    itIf(is('>=15 || ^16.0.0-alpha'), 'should throw error when cb is not a function', () => {
+    it('should throw error when cb is not a function', () => {
       class Foo extends React.Component {
         constructor(props) {
           super(props);

diff --git a/packages/enzyme-test-suite/test/ShallowWrapper-spec.jsx b/packages/enzyme-test-suite/test/ShallowWrapper-spec.jsx
@@ -2069,6 +2069,25 @@ describe('shallow', () => {
       expect(wrapper.find('.bar')).to.have.lengthOf(1);
     });
 
+    it('allows setState inside of componentDidMount', () => {
+      class MySharona extends React.Component {
+        constructor(props) {
+          super(props);
+          this.state = { mounted: false };
+        }
+
+        componentDidMount() {
+          this.setState({ mounted: true });
+        }
+
+        render() {
+          return <div>{this.state.mounted ? 'a' : 'b'}</div>;
+        }
+      }
+      const wrapper = shallow(<MySharona />);
+      expect(wrapper.find('div').text()).to.equal('a');
+    });
+
     it('should call the callback when setState has completed', () => {
       class Foo extends React.Component {
         constructor(props) {
@@ -2087,6 +2106,7 @@ describe('shallow', () => {
       return new Promise((resolve) => {
         wrapper.setState({ id: 'bar' }, function callback(...args) {
           expect(wrapper.state()).to.eql({ id: 'bar' });
+          expect(this).to.equal(wrapper.instance());
           expect(this.state).to.eql({ id: 'bar' });
           expect(wrapper.find('div').prop('className')).to.eql('bar');
           expect(args).to.eql(CALLING_SETSTATE_CALLBACK_WITH_UNDEFINED ? [undefined] : []);
@@ -2122,6 +2142,24 @@ describe('shallow', () => {
         );
       });
     });
+
+    it('should throw error when cb is not a function', () => {
+      class Foo extends React.Component {
+        constructor(props) {
+          super(props);
+          this.state = { id: 'foo' };
+        }
+
+        render() {
+          return (
+            <div className={this.state.id} />
+          );
+        }
+      }
+      const wrapper = shallow(<Foo />);
+      expect(wrapper.state()).to.eql({ id: 'foo' });
+      expect(() => wrapper.setState({ id: 'bar' }, 1)).to.throw(Error);
+    });
   });
 
   describe('.is(selector)', () => {