From 036bfc909db6a25cd0af12ee4f5480b72ed25630 Mon Sep 17 00:00:00 2001
From: Felix Mosheev <9304194+felixmosh@users.noreply.github.com>
Date: Sun, 22 Dec 2019 11:19:09 +0200
Subject: [PATCH 1/2] Fix deprecated lifecycle method usage in tests Fix async
 tests that not used done and passed without a good reason :]

---
 __test_utils__/DynamicInputForm.tsx |  35 +++++++
 __tests__/Element-spec.tsx          |   4 +-
 __tests__/Formsy-spec.tsx           | 157 +++++++++++++++-------------
 3 files changed, 123 insertions(+), 73 deletions(-)
 create mode 100644 __test_utils__/DynamicInputForm.tsx

diff --git a/__test_utils__/DynamicInputForm.tsx b/__test_utils__/DynamicInputForm.tsx
new file mode 100644
index 00000000..73088683
--- /dev/null
+++ b/__test_utils__/DynamicInputForm.tsx
@@ -0,0 +1,35 @@
+import * as React from 'react';
+import Formsy from '../src';
+import TestInput from './TestInput';
+
+interface DynamicInputFormProps {
+  onSubmit: (model: any) => void;
+  inputName?: string;
+}
+
+class DynamicInputForm extends React.Component<DynamicInputFormProps> {
+  public state = {
+    input: null,
+  };
+
+  private addInput = () => {
+    const { inputName } = this.props;
+    this.setState({
+      input: <TestInput name={inputName} value="" />,
+    });
+  };
+
+  public render() {
+    return (
+      <>
+        <Formsy onSubmit={this.props.onSubmit}>
+          {this.state.input}
+          {this.props.children}
+        </Formsy>
+        <button type="button" onClick={this.addInput} />
+      </>
+    );
+  }
+}
+
+export default DynamicInputForm;
diff --git a/__tests__/Element-spec.tsx b/__tests__/Element-spec.tsx
index b677cf9c..d0e08ee3 100644
--- a/__tests__/Element-spec.tsx
+++ b/__tests__/Element-spec.tsx
@@ -83,8 +83,8 @@ describe('Element', () => {
   it('should return true or false when calling isValid() depending on valid state', () => {
     let isValid = null;
     const Input = InputFactory({
-      componentWillReceiveProps: function(nextProps) {
-        isValid = nextProps.isValid;
+      componentDidUpdate: function() {
+        isValid = this.props.isValid;
       },
     });
     const form = mount(
diff --git a/__tests__/Formsy-spec.tsx b/__tests__/Formsy-spec.tsx
index 47771cab..119f766f 100755
--- a/__tests__/Formsy-spec.tsx
+++ b/__tests__/Formsy-spec.tsx
@@ -1,11 +1,12 @@
-import React from 'react';
 import { mount } from 'enzyme';
+import * as React from 'react';
 import sinon from 'sinon';
-
-import Formsy, { addValidationRule } from '../src';
+import DynamicInputForm from '../__test_utils__/DynamicInputForm';
+import immediate from '../__test_utils__/immediate';
 import TestInput from '../__test_utils__/TestInput';
 import TestInputHoc from '../__test_utils__/TestInputHoc';
-import immediate from '../__test_utils__/immediate';
+
+import Formsy, { addValidationRule } from '../src';
 
 describe('Setting up a form', () => {
   it('should expose the users DOM node through an innerRef prop', () => {
@@ -41,6 +42,7 @@ describe('Setting up a form', () => {
 
   it('should allow for null/undefined children', () => {
     let model = null;
+
     class TestForm extends React.Component {
       render() {
         return (
@@ -61,92 +63,63 @@ describe('Setting up a form', () => {
   });
 
   it('should allow for inputs being added dynamically', () => {
-    const inputs = [];
-    let forceUpdate = null;
     let model = null;
-    class TestForm extends React.Component {
-      componentWillMount() {
-        forceUpdate = this.forceUpdate.bind(this);
-      }
-      render() {
-        return <Formsy onSubmit={formModel => (model = formModel)}>{inputs}</Formsy>;
-      }
-    }
-    const form = mount(<TestForm />);
 
-    // Wait before adding the input
-    setTimeout(() => {
-      inputs.push(<TestInput name="test" value="" key={inputs.length} />);
+    const form = mount(<DynamicInputForm onSubmit={formModel => (model = formModel)} inputName="test" />);
+    form.find('button').simulate('click');
+    form.update();
 
-      forceUpdate(() => {
-        // Wait for next event loop, as that does the form
-        immediate(() => {
-          form.simulate('submit');
-          test.ok('test' in model);
-        });
-      });
-    }, 10);
+    form.simulate('submit');
+    expect(model).toHaveProperty('test');
   });
 
   it('should allow dynamically added inputs to update the form-model', () => {
-    const inputs = [];
-    let forceUpdate = null;
     let model = null;
-    class TestForm extends React.Component {
-      componentWillMount() {
-        forceUpdate = this.forceUpdate.bind(this);
-      }
-      render() {
-        return <Formsy onSubmit={formModel => (model = formModel)}>{inputs}</Formsy>;
-      }
-    }
-    const form = mount(<TestForm />);
 
-    // Wait before adding the input
-    immediate(() => {
-      inputs.push(<TestInput name="test" key={inputs.length} />);
-
-      forceUpdate(() => {
-        // Wait for next event loop, as that does the form
-        immediate(() => {
-          form.find('input').simulate({
-            target: { value: 'foo' },
-          });
-          form.simulate('submit');
-          expect(model.test).toEqual('foo');
-        });
-      });
+    const form = mount(<DynamicInputForm onSubmit={formModel => (model = formModel)} inputName="test" />);
+    form.find('button').simulate('click');
+    form.update();
+
+    form.find('input').simulate('change', {
+      target: { value: 'foo' },
     });
+    form.simulate('submit');
+    expect(model).toHaveProperty('test', 'foo');
   });
 
   it('should allow a dynamically updated input to update the form-model', () => {
-    let forceUpdate = null;
     let model = null;
 
-    class TestForm extends React.Component {
-      componentWillMount() {
-        forceUpdate = this.forceUpdate.bind(this);
-      }
-      render() {
-        const input = <TestInput name="test" value={this.props.value} />;
+    class TestForm extends React.Component<any> {
+      public state = {
+        inputValue: this.props.inputValue,
+      };
 
-        return <Formsy onSubmit={formModel => (model = formModel)}>{input}</Formsy>;
+      render() {
+        const { inputValue } = this.state;
+        return (
+          <Formsy onSubmit={formModel => (model = formModel)}>
+            <TestInput name="test" value={inputValue} />
+            <button type="button" onClick={this.updateInputValue} />
+          </Formsy>
+        );
       }
+
+      updateInputValue = () => this.setState({ inputValue: 'bar' });
     }
-    let form = mount(<TestForm value="foo" />);
 
-    // Wait before changing the input
-    immediate(() => {
-      form = mount(<TestForm value="bar" />);
+    const form = mount(<TestForm inputValue="foo" />);
 
-      forceUpdate(() => {
-        // Wait for next event loop, as that does the form
-        immediate(() => {
-          form.simulate('submit');
-          expect(model.test).toEqual('bar');
-        });
-      });
-    });
+    form.simulate('submit');
+
+    expect(model).toHaveProperty('test', 'foo');
+
+    form.find('button').simulate('click');
+    form.update();
+    form.simulate('submit');
+    form.update();
+
+    expect(model).toHaveProperty('test', 'bar');
   });
 });
 
@@ -183,11 +156,13 @@ describe('validations', () => {
         super(props);
         this.state = { rule: 'ruleA' };
       }
+
       changeRule = () => {
         this.setState({
           rule: 'ruleB',
         });
       };
+
       render() {
         return (
           <Formsy>
@@ -214,11 +189,13 @@ describe('validations', () => {
         super(props);
         this.state = { showSecondInput: false };
       }
+
       addInput = () => {
         this.setState({
           showSecondInput: true,
         });
       };
+
       render() {
         return (
           <Formsy ref="formsy" onInvalid={isInValidSpy}>
@@ -247,11 +224,13 @@ describe('validations', () => {
         super(props);
         this.state = { showSecondInput: true };
       }
+
       removeInput() {
         this.setState({
           showSecondInput: false,
         });
       }
+
       render() {
         return (
           <Formsy ref="formsy" onValid={isValidSpy}>
@@ -296,11 +275,13 @@ describe('validations', () => {
 describe('onChange', () => {
   it('should not trigger onChange when form is mounted', () => {
     const hasChanged = sinon.spy();
+
     class TestForm extends React.Component {
       render() {
         return <Formsy onChange={hasChanged}></Formsy>;
       }
     }
+
     mount(<TestForm />);
     expect(hasChanged.called).toEqual(false);
   });
@@ -318,15 +299,18 @@ describe('onChange', () => {
 
   it('should trigger onChange once when new input is added to form', () => {
     const hasChanged = sinon.spy();
+
     class TestForm extends React.Component {
       state = {
         showInput: false,
       };
+
       addInput() {
         this.setState({
           showInput: true,
         });
       }
+
       render() {
         return <Formsy onChange={hasChanged}>{this.state.showInput ? <TestInput name="test" /> : null}</Formsy>;
       }
@@ -341,15 +325,18 @@ describe('onChange', () => {
 
   it('onChange should honor dot notation transformations', () => {
     const hasChanged = sinon.spy();
+
     class TestForm extends React.Component {
       state = {
         showInput: false,
       };
+
       addInput() {
         this.setState({
           showInput: true,
         });
       }
+
       render() {
         return (
           <Formsy onChange={hasChanged}>
@@ -371,9 +358,11 @@ describe('Update a form', () => {
   it('should allow elements to check if the form is disabled', () => {
     class TestForm extends React.Component {
       state = { disabled: true };
+
       enableForm() {
         this.setState({ disabled: false });
       }
+
       render() {
         return (
           <Formsy disabled={this.state.disabled}>
@@ -399,6 +388,7 @@ describe('Update a form', () => {
       onChange = values => {
         this.setState(values.foo ? { validationErrors: {} } : { validationErrors: { foo: 'bar' } });
       };
+
       render() {
         return (
           <Formsy onChange={this.onChange} validationErrors={this.state.validationErrors}>
@@ -407,6 +397,7 @@ describe('Update a form', () => {
         );
       }
     }
+
     const form = mount(<TestForm />);
 
     // Wait for update
@@ -424,6 +415,7 @@ describe('Update a form', () => {
 
   it('should trigger an onValidSubmit when submitting a valid form', () => {
     let isCalled = sinon.spy();
+
     class TestForm extends React.Component {
       render() {
         return (
@@ -433,6 +425,7 @@ describe('Update a form', () => {
         );
       }
     }
+
     const form = mount(<TestForm />);
     const FoundForm = form.find(TestForm);
     FoundForm.simulate('submit');
@@ -441,6 +434,7 @@ describe('Update a form', () => {
 
   it('should trigger an onInvalidSubmit when submitting an invalid form', () => {
     let isCalled = sinon.spy();
+
     class TestForm extends React.Component {
       render() {
         return (
@@ -450,6 +444,7 @@ describe('Update a form', () => {
         );
       }
     }
+
     const form = mount(<TestForm />);
 
     const FoundForm = form.find(TestForm);
@@ -461,6 +456,7 @@ describe('Update a form', () => {
 describe('value === false', () => {
   it('should call onSubmit correctly', () => {
     const onSubmit = sinon.spy();
+
     class TestForm extends React.Component {
       render() {
         return (
@@ -479,15 +475,18 @@ describe('value === false', () => {
 
   it('should allow dynamic changes to false', () => {
     const onSubmit = sinon.spy();
+
     class TestForm extends React.Component {
       state = {
         value: true,
       };
+
       changeValue() {
         this.setState({
           value: false,
         });
       }
+
       render() {
         return (
           <Formsy onSubmit={onSubmit}>
@@ -515,6 +514,7 @@ describe('value === false', () => {
         );
       }
     }
+
     const form = mount(<TestForm />);
     const input = form.find(TestInput);
     expect(input.instance().isFormSubmitted()).toEqual(false);
@@ -527,11 +527,13 @@ describe('value === false', () => {
       state = {
         value: true,
       };
+
       changeValue() {
         this.setState({
           value: false,
         });
       }
+
       render() {
         return (
           <Formsy>
@@ -541,6 +543,7 @@ describe('value === false', () => {
         );
       }
     }
+
     const form = mount(<TestForm />);
     const input = form.find(TestInput);
     const formsyForm = form.find(Formsy);
@@ -557,6 +560,7 @@ describe('value === false', () => {
         valueFoo: true,
         valueBar: true,
       };
+
       render() {
         return (
           <Formsy>
@@ -567,6 +571,7 @@ describe('value === false', () => {
         );
       }
     }
+
     const form = mount(<TestForm />);
     const inputs = form.find(TestInput);
     const formsyForm = form.find(Formsy);
@@ -602,11 +607,13 @@ describe('value === false', () => {
       state = {
         value: true,
       };
+
       changeValue() {
         this.setState({
           value: false,
         });
       }
+
       render() {
         return (
           <Formsy>
@@ -616,6 +623,7 @@ describe('value === false', () => {
         );
       }
     }
+
     const form = mount(<TestForm />);
     const input = form.find(TestInput);
     const formsyForm = form.find(Formsy);
@@ -642,6 +650,7 @@ describe('.reset()', () => {
         );
       }
     }
+
     const form = mount(<TestForm />);
     const input = form.find(TestInput);
     const formsyForm = form.find(Formsy);
@@ -714,6 +723,7 @@ describe('form valid state', () => {
       onInvalid = () => {
         this.setState({ isValid: false });
       };
+
       render() {
         return (
           <Formsy onInvalid={this.onInvalid} onValid={this.onValid} onValidSubmit={this.onValidSubmit}>
@@ -722,6 +732,7 @@ describe('form valid state', () => {
         );
       }
     }
+
     const form = mount(<TestForm />);
 
     // Wait for update
@@ -748,6 +759,7 @@ describe('form valid state', () => {
       onInvalid = () => {
         this.setState({ isValid: false });
       };
+
       render() {
         return (
           <Formsy onInvalid={this.onInvalid} onValid={this.onValid} validationErrors={this.state.validationErrors}>
@@ -756,6 +768,7 @@ describe('form valid state', () => {
         );
       }
     }
+
     const form = mount(<TestForm />);
 
     // Wait for update
@@ -782,6 +795,7 @@ describe('form valid state', () => {
       onInvalid = () => {
         this.setState({ isValid: false });
       };
+
       render() {
         return (
           <Formsy
@@ -795,6 +809,7 @@ describe('form valid state', () => {
         );
       }
     }
+
     const form = mount(<TestForm />);
 
     // Wait for update

From 34fc1025a7b869d84e44eed88e098c1024c1f2c4 Mon Sep 17 00:00:00 2001
From: Felix Mosheev <9304194+felixmosh@users.noreply.github.com>
Date: Sat, 28 Dec 2019 10:31:07 +0200
Subject: [PATCH 2/2] Fix async tests & remove sinon usage

---
 __tests__/Formsy-spec.tsx | 190 +++++++++++++++++---------------------
 1 file changed, 83 insertions(+), 107 deletions(-)

diff --git a/__tests__/Formsy-spec.tsx b/__tests__/Formsy-spec.tsx
index 119f766f..0e6f135b 100755
--- a/__tests__/Formsy-spec.tsx
+++ b/__tests__/Formsy-spec.tsx
@@ -1,8 +1,6 @@
 import { mount } from 'enzyme';
 import * as React from 'react';
-import sinon from 'sinon';
 import DynamicInputForm from '../__test_utils__/DynamicInputForm';
-import immediate from '../__test_utils__/immediate';
 import TestInput from '../__test_utils__/TestInput';
 import TestInputHoc from '../__test_utils__/TestInputHoc';
 
@@ -50,16 +48,15 @@ describe('Setting up a form', () => {
             <h1>Test</h1>
             {null}
             {undefined}
-            <TestInput name="name" value={'foo'} />
+            <TestInput name="name" value="foo" />
           </Formsy>
         );
       }
     }
 
     const form = mount(<TestForm />);
-    immediate(() => {
-      expect(model).toEqual({ name: 'foo' });
-    });
+    form.simulate('submit');
+    expect(model).toEqual({ name: 'foo' });
   });
 
   it('should allow for inputs being added dynamically', () => {
@@ -125,8 +122,8 @@ describe('Setting up a form', () => {
 
 describe('validations', () => {
   it('should run when the input changes', () => {
-    const runRule = sinon.spy();
-    const notRunRule = sinon.spy();
+    const runRule = jest.fn();
+    const notRunRule = jest.fn();
 
     addValidationRule('runRule', runRule);
     addValidationRule('notRunRule', notRunRule);
@@ -141,13 +138,14 @@ describe('validations', () => {
     input.simulate('change', {
       target: { value: 'bar' },
     });
-    expect(runRule.calledWith({ one: 'bar' })).toBe(true);
-    expect(notRunRule.called).toEqual(false);
+
+    expect(runRule).toHaveBeenCalledWith({ one: 'bar' }, 'bar', true);
+    expect(notRunRule).not.toHaveBeenCalled();
   });
 
   it('should allow the validation to be changed', () => {
-    const ruleA = sinon.spy();
-    const ruleB = sinon.spy();
+    const ruleA = jest.fn();
+    const ruleB = jest.fn();
     addValidationRule('ruleA', ruleA);
     addValidationRule('ruleB', ruleB);
 
@@ -178,13 +176,15 @@ describe('validations', () => {
     input.simulate('change', {
       target: { value: 'bar' },
     });
-    expect(ruleB.calledWith({ one: 'bar' })).toBe(true);
+    expect(ruleB).toHaveBeenCalledWith({ one: 'bar' }, 'bar', true);
   });
 
   it('should invalidate a form if dynamically inserted input is invalid', () => {
-    const isInValidSpy = sinon.spy();
+    const isInValidSpy = jest.fn();
 
     class TestForm extends React.Component {
+      formRef = React.createRef();
+
       constructor(props) {
         super(props);
         this.state = { showSecondInput: false };
@@ -198,7 +198,7 @@ describe('validations', () => {
 
       render() {
         return (
-          <Formsy ref="formsy" onInvalid={isInValidSpy}>
+          <Formsy ref={this.formRef} onInvalid={isInValidSpy}>
             <TestInput name="one" validations="isEmail" value="foo@bar.com" />
             {this.state.showSecondInput ? <TestInput name="two" validations="isEmail" value="foo@bar" /> : null}
           </Formsy>
@@ -208,18 +208,18 @@ describe('validations', () => {
 
     const form = mount(<TestForm />);
 
-    expect(form.instance().refs.formsy.state.isValid).toEqual(true);
+    expect(form.instance().formRef.current.state.isValid).toEqual(true);
     form.instance().addInput();
 
-    immediate(() => {
-      expect(isInValidSpy.called).toEqual(true);
-    });
+    expect(isInValidSpy).toHaveBeenCalled();
   });
 
   it('should validate a form when removing an invalid input', () => {
-    const isValidSpy = sinon.spy();
+    const isValidSpy = jest.fn();
 
     class TestForm extends React.Component {
+      formRef = React.createRef();
+
       constructor(props) {
         super(props);
         this.state = { showSecondInput: true };
@@ -233,7 +233,7 @@ describe('validations', () => {
 
       render() {
         return (
-          <Formsy ref="formsy" onValid={isValidSpy}>
+          <Formsy ref={this.formRef} onValid={isValidSpy}>
             <TestInput name="one" validations="isEmail" value="foo@bar.com" />
             {this.state.showSecondInput ? <TestInput name="two" validations="isEmail" value="foo@bar" /> : null}
           </Formsy>
@@ -243,17 +243,15 @@ describe('validations', () => {
 
     const form = mount(<TestForm />);
 
-    expect(form.instance().refs.formsy.state.isValid).toEqual(false);
+    expect(form.instance().formRef.current.state.isValid).toEqual(false);
     form.instance().removeInput();
 
-    immediate(() => {
-      expect(isValidSpy.called).toEqual(true);
-    });
+    expect(isValidSpy).toHaveBeenCalled();
   });
 
   it('runs multiple validations', () => {
-    const ruleA = sinon.spy();
-    const ruleB = sinon.spy();
+    const ruleA = jest.fn();
+    const ruleB = jest.fn();
     addValidationRule('ruleA', ruleA);
     addValidationRule('ruleB', ruleB);
 
@@ -267,14 +265,14 @@ describe('validations', () => {
     input.simulate('change', {
       target: { value: 'bar' },
     });
-    expect(ruleA.calledWith({ one: 'bar' })).toBe(true);
-    expect(ruleB.calledWith({ one: 'bar' })).toBe(true);
+    expect(ruleA).toHaveBeenCalledWith({ one: 'bar' }, 'bar', true);
+    expect(ruleB).toHaveBeenCalledWith({ one: 'bar' }, 'bar', true);
   });
 });
 
 describe('onChange', () => {
   it('should not trigger onChange when form is mounted', () => {
-    const hasChanged = sinon.spy();
+    const hasChanged = jest.fn();
 
     class TestForm extends React.Component {
       render() {
@@ -283,22 +281,22 @@ describe('onChange', () => {
     }
 
     mount(<TestForm />);
-    expect(hasChanged.called).toEqual(false);
+    expect(hasChanged).not.toHaveBeenCalled();
   });
 
   it('should trigger onChange once when form element is changed', () => {
-    const hasChanged = sinon.spy();
+    const hasChanged = jest.fn();
     const form = mount(
       <Formsy onChange={hasChanged}>
-        <TestInput name="foo" />
+        <TestInput name="foo" value="" />
       </Formsy>,
     );
     form.find('input').simulate('change', { target: { value: 'bar' } });
-    expect(hasChanged.calledOnce).toEqual(true);
+    expect(hasChanged).toHaveBeenCalledTimes(1);
   });
 
   it('should trigger onChange once when new input is added to form', () => {
-    const hasChanged = sinon.spy();
+    const hasChanged = jest.fn();
 
     class TestForm extends React.Component {
       state = {
@@ -318,13 +316,11 @@ describe('onChange', () => {
 
     const form = mount(<TestForm />);
     form.instance().addInput();
-    immediate(() => {
-      expect(hasChanged.calledOnce).toEqual(true);
-    });
+    expect(hasChanged).toHaveBeenCalledTimes(1);
   });
 
   it('onChange should honor dot notation transformations', () => {
-    const hasChanged = sinon.spy();
+    const hasChanged = jest.fn();
 
     class TestForm extends React.Component {
       state = {
@@ -348,9 +344,9 @@ describe('onChange', () => {
 
     const form = mount(<TestForm />);
     form.instance().addInput();
-    immediate(() => {
-      expect(hasChanged.args[0][0]).toEqual({ parent: { child: 'test' } });
-    });
+    form.update();
+
+    expect(hasChanged).toHaveBeenCalledWith({ parent: { child: 'test' } }, false);
   });
 });
 
@@ -377,9 +373,8 @@ describe('Update a form', () => {
     expect(input.instance().isFormDisabled()).toEqual(true);
 
     form.instance().enableForm();
-    immediate(() => {
-      expect(input.instance().isFormDisabled()).toEqual(false);
-    });
+
+    expect(input.instance().isFormDisabled()).toEqual(false);
   });
 
   it('should be possible to pass error state of elements by changing an errors attribute', () => {
@@ -392,7 +387,7 @@ describe('Update a form', () => {
       render() {
         return (
           <Formsy onChange={this.onChange} validationErrors={this.state.validationErrors}>
-            <TestInput name="foo" />
+            <TestInput name="foo" value="" />
           </Formsy>
         );
       }
@@ -400,21 +395,15 @@ describe('Update a form', () => {
 
     const form = mount(<TestForm />);
 
-    // Wait for update
-    immediate(() => {
-      const input = form.find(TestInput);
-      expect(input.instance().getErrorMessage()).toEqual('bar');
-      input.setValue('gotValue');
+    const input = form.find(TestInput);
+    expect(input.instance().getErrorMessage()).toEqual('bar');
+    input.instance().setValue('gotValue');
 
-      // Wait for update
-      immediate(() => {
-        expect(input.instance().getErrorMessage()).toEqual(null);
-      });
-    });
+    expect(input.instance().getErrorMessage()).toEqual(null);
   });
 
   it('should trigger an onValidSubmit when submitting a valid form', () => {
-    let isCalled = sinon.spy();
+    const isCalled = jest.fn();
 
     class TestForm extends React.Component {
       render() {
@@ -429,11 +418,11 @@ describe('Update a form', () => {
     const form = mount(<TestForm />);
     const FoundForm = form.find(TestForm);
     FoundForm.simulate('submit');
-    expect(isCalled.called).toEqual(true);
+    expect(isCalled).toHaveBeenCalled();
   });
 
   it('should trigger an onInvalidSubmit when submitting an invalid form', () => {
-    let isCalled = sinon.spy();
+    const isCalled = jest.fn();
 
     class TestForm extends React.Component {
       render() {
@@ -449,13 +438,13 @@ describe('Update a form', () => {
 
     const FoundForm = form.find(TestForm);
     FoundForm.simulate('submit');
-    expect(isCalled.called).toEqual(true);
+    expect(isCalled).toHaveBeenCalled();
   });
 });
 
 describe('value === false', () => {
   it('should call onSubmit correctly', () => {
-    const onSubmit = sinon.spy();
+    const onSubmit = jest.fn();
 
     class TestForm extends React.Component {
       render() {
@@ -470,11 +459,11 @@ describe('value === false', () => {
 
     const form = mount(<TestForm />);
     form.simulate('submit');
-    expect(onSubmit.calledWith({ foo: false })).toEqual(true);
+    expect(onSubmit).toHaveBeenCalledWith({ foo: false }, expect.any(Function), expect.any(Function));
   });
 
   it('should allow dynamic changes to false', () => {
-    const onSubmit = sinon.spy();
+    const onSubmit = jest.fn();
 
     class TestForm extends React.Component {
       state = {
@@ -500,7 +489,7 @@ describe('value === false', () => {
     const form = mount(<TestForm />);
     form.instance().changeValue();
     form.simulate('submit');
-    expect(onSubmit.calledWith({ foo: false })).toEqual(true);
+    expect(onSubmit).toHaveBeenCalledWith({ foo: false }, expect.any(Function), expect.any(Function));
   });
 
   it('should say the form is submitted', () => {
@@ -664,18 +653,18 @@ describe('.reset()', () => {
 
 describe('.isChanged()', () => {
   it('initially returns false', () => {
-    const hasOnChanged = sinon.spy();
+    const hasOnChanged = jest.fn();
     const form = mount(
       <Formsy onChange={hasOnChanged}>
         <TestInput name="one" value="foo" />
       </Formsy>,
     );
     expect(form.instance().isChanged()).toEqual(false);
-    expect(hasOnChanged.called).toEqual(false);
+    expect(hasOnChanged).not.toHaveBeenCalled();
   });
 
   it('returns true when changed', () => {
-    const hasOnChanged = sinon.spy();
+    const hasOnChanged = jest.fn();
     const form = mount(
       <Formsy onChange={hasOnChanged}>
         <TestInput name="one" value="foo" />
@@ -686,11 +675,11 @@ describe('.isChanged()', () => {
       target: { value: 'bar' },
     });
     expect(form.instance().isChanged()).toEqual(true);
-    expect(hasOnChanged.calledWith({ one: 'bar' })).toEqual(true);
+    expect(hasOnChanged).toHaveBeenCalledWith({ one: 'bar' }, true);
   });
 
   it('returns false if changes are undone', () => {
-    const hasOnChanged = sinon.spy();
+    const hasOnChanged = jest.fn();
     const form = mount(
       <Formsy onChange={hasOnChanged}>
         <TestInput name="one" value="foo" />
@@ -700,28 +689,30 @@ describe('.isChanged()', () => {
     input.simulate('change', {
       target: { value: 'bar' },
     });
-    expect(hasOnChanged.calledWith({ one: 'bar' })).toBe(true);
+    expect(hasOnChanged).toHaveBeenCalledWith({ one: 'bar' }, true);
 
     input.simulate('change', {
       target: { value: 'foo' },
     });
+
     expect(form.instance().isChanged()).toEqual(false);
-    expect(hasOnChanged.calledWith({ one: 'foo' })).toBe(true);
+    expect(hasOnChanged).toHaveBeenCalledWith({ one: 'foo' }, false);
   });
 });
 
 describe('form valid state', () => {
   it('should allow to be changed with updateInputsWithError', () => {
+    let isValid = true;
+
     class TestForm extends React.Component {
-      state = { isValid: true };
       onValidSubmit = (model, reset, updateInputsWithError) => {
         updateInputsWithError({ foo: 'bar' }, true);
       };
       onValid = () => {
-        this.setState({ isValid: true });
+        isValid = true;
       };
       onInvalid = () => {
-        this.setState({ isValid: false });
+        isValid = false;
       };
 
       render() {
@@ -735,29 +726,25 @@ describe('form valid state', () => {
 
     const form = mount(<TestForm />);
 
-    // Wait for update
-    immediate(() => {
-      expect(form.state.isValid).toEqual(true);
-      form.simulate('submit');
+    expect(isValid).toEqual(true);
+    form.simulate('submit');
 
-      // Wait for update
-      immediate(() => {
-        expect(form.state.isValid).toEqual(false);
-      });
-    });
+    expect(isValid).toEqual(false);
   });
 
   it('should be false when validationErrors is not empty', () => {
+    let isValid = true;
+
     class TestForm extends React.Component {
-      state = { validationErrors: {}, isValid: true };
+      state = { validationErrors: {} };
       setValidationErrors = empty => {
         this.setState(!empty ? { validationErrors: { foo: 'bar' } } : { validationErrors: {} });
       };
       onValid = () => {
-        this.setState({ isValid: true });
+        isValid = true;
       };
       onInvalid = () => {
-        this.setState({ isValid: false });
+        isValid = false;
       };
 
       render() {
@@ -771,29 +758,24 @@ describe('form valid state', () => {
 
     const form = mount(<TestForm />);
 
-    // Wait for update
-    immediate(() => {
-      expect(form.state.isValid).toEqual(true);
-      form.setValidationErrors();
+    expect(isValid).toEqual(true);
+    form.instance().setValidationErrors();
 
-      // Wait for update
-      immediate(() => {
-        expect(form.state.isValid).toEqual(false);
-      });
-    });
+    expect(isValid).toEqual(false);
   });
 
   it('should be true when validationErrors is not empty and preventExternalInvalidation is true', () => {
+    let isValid = true;
     class TestForm extends React.Component {
-      state = { validationErrors: {}, isValid: true };
+      state = { validationErrors: {} };
       setValidationErrors = empty => {
         this.setState(!empty ? { validationErrors: { foo: 'bar' } } : { validationErrors: {} });
       };
       onValid = () => {
-        this.setState({ isValid: true });
+        isValid = true;
       };
       onInvalid = () => {
-        this.setState({ isValid: false });
+        isValid = false;
       };
 
       render() {
@@ -812,15 +794,9 @@ describe('form valid state', () => {
 
     const form = mount(<TestForm />);
 
-    // Wait for update
-    immediate(() => {
-      expect(form.state.isValid).toEqual(true);
-      form.setValidationErrors();
+    expect(isValid).toEqual(true);
+    form.instance().setValidationErrors();
 
-      // Wait for update
-      immediate(() => {
-        expect(form.state.isValid).toEqual(true);
-      });
-    });
+    expect(isValid).toEqual(true);
   });
 });