Migrate to react testing lib instead of enzyme (#679)

* Migrate to react testing lib instead of enzyme

* Reformat the tests with prettier

__test_utils__/DynamicInputForm.tsx

@@ -18,7 +18,7 @@ class DynamicInputForm extends React.Component<DynamicInputFormProps, { input: a
   private addInput = () => {
     const { inputName } = this.props;
     this.setState({
-      input: <TestInput name={inputName} value="" />,
+      input: <TestInput name={inputName} value="" testId="test-input" />,
     });
   };
 
@@ -28,11 +28,11 @@ class DynamicInputForm extends React.Component<DynamicInputFormProps, { input: a
 
     return (
       <>
-        <Formsy onSubmit={onSubmit}>
+        <Formsy onSubmit={onSubmit} data-testid="form">
           {input}
           {children}
         </Formsy>
-        <button type="button" onClick={this.addInput}>
+        <button type="button" onClick={this.addInput} data-testid="add-input-btn">
           Add input
         </button>
       </>

__test_utils__/TestInput.tsx

@@ -4,15 +4,30 @@ import React from 'react';
 import { withFormsy } from '../src';
 import { PassDownProps } from '../src/withFormsy';
 
-export type FormsyInputProps = Omit<React.HTMLProps<HTMLInputElement>, 'required' | 'value'> & PassDownProps<string>;
+export type FormsyInputProps = Omit<React.HTMLProps<HTMLInputElement>, 'required' | 'value'> &
+  PassDownProps<string> & { testId?: string };
 
 class TestInput extends React.Component<FormsyInputProps> {
   updateValue = (event) => {
     this.props.setValue(event.target[this.props.type === 'checkbox' ? 'checked' : 'value']);
   };
 
   render() {
-    return <input type={this.props.type || 'text'} value={this.props.value || ''} onChange={this.updateValue} />;
+    return (
+      <input
+        type={this.props.type || 'text'}
+        value={this.props.value || ''}
+        onChange={this.updateValue}
+        data-is-valid={this.props.isValid}
+        data-is-pristine={this.props.isPristine}
+        data-error-message={this.props.errorMessage}
+        data-error-messages={this.props.errorMessages.join(';')}
+        data-is-form-disabled={this.props.isFormDisabled}
+        data-is-form-submitted={this.props.isFormSubmitted}
+        data-value={JSON.stringify(this.props.value)}
+        data-testid={this.props.testId}
+      />
+    );
   }
 }
 

__test_utils__/TestInputHoc.tsx

@@ -1,10 +1,14 @@
 import React from 'react';
 import { withFormsy } from '../src';
+import { PassDownProps } from '../src/withFormsy';
 
-class TestComponent extends React.Component {
+type TestComponentProps = { testId?: string; name?: string } & PassDownProps<string>;
+
+class TestComponent extends React.Component<TestComponentProps> {
   render() {
-    return <input />;
+    const { testId, name } = this.props;
+    return <input data-testid={testId} name={name} />;
   }
 }
 
-export default withFormsy(TestComponent as any);
+export default withFormsy<TestComponentProps, any>(TestComponent);

__test_utils__/getValidState.tsx

@@ -0,0 +1,31 @@
+import { render } from '@testing-library/react';
+import React from 'react';
+
+import Formsy from '../src';
+import { InputFactory } from './TestInput';
+
+const TestInput = InputFactory({
+  render() {
+    const { value, isValid, testId } = this.props;
+    return <input value={value || ''} readOnly data-is-valid={isValid} data-testid={testId} />;
+  },
+});
+
+function ValidationForm(props: { validations: string; value?: any }) {
+  const { validations, value } = props;
+
+  return (
+    <Formsy>
+      <TestInput name="foo" validations={validations} value={value} testId="test-input" />
+    </Formsy>
+  );
+}
+
+export async function getValidState(testForm: React.ComponentElement<any, any>) {
+  const form = render(testForm);
+  const inputComponent = await form.findByTestId('test-input');
+
+  return inputComponent.dataset.isValid === 'true';
+}
+
+export default ValidationForm;