Migrate to react testing lib instead of enzyme

__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;