Convert old tests to use "react-testing-library"

app/soapbox/components/ui/form/__tests__/form.test.js

@@ -1,40 +0,0 @@
-import React from 'react';
-
-import { createShallowComponent } from 'soapbox/test_helpers';
-
-import Form from '../form';
-
-describe('<Form />', () => {
-  it('renders children', () => {
-    const onSubmitMock = jest.fn();
-    const component = createShallowComponent(
-      <Form onSubmit={onSubmitMock}>children</Form>,
-    );
-
-    expect(component.text()).toContain('children');
-  });
-
-  it('handles onSubmit prop', () => {
-    const onSubmitMock = jest.fn();
-    const component = createShallowComponent(
-      <Form onSubmit={onSubmitMock}>children</Form>,
-    );
-
-    component.find('form').at(0).simulate('submit', {
-      preventDefault: () => {},
-    });
-    expect(onSubmitMock).toHaveBeenCalled();
-  });
-
-  it('handles disabled prop', () => {
-    const onSubmitMock = jest.fn();
-    const component = createShallowComponent(
-      <Form onSubmit={onSubmitMock} disabled>
-        <button type='submit'>Submit</button>
-      </Form>,
-    );
-
-    component.find('button').at(0).simulate('click');
-    expect(onSubmitMock).not.toHaveBeenCalled();
-  });
-});

app/soapbox/components/ui/form/__tests__/form.test.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+
+import { fireEvent, render, screen } from '../../../../jest/test-helpers';
+import Form from '../form';
+
+describe('<Form />', () => {
+  it('renders children', () => {
+    const onSubmitMock = jest.fn();
+    render(
+      <Form onSubmit={onSubmitMock}>children</Form>,
+    );
+
+    expect(screen.getByTestId('form')).toHaveTextContent('children');
+  });
+
+  it('handles onSubmit prop', () => {
+    const onSubmitMock = jest.fn();
+    render(
+      <Form onSubmit={onSubmitMock}>children</Form>,
+    );
+
+    fireEvent.submit(
+      screen.getByTestId('form'), {
+        preventDefault: () => {},
+      },
+    );
+    expect(onSubmitMock).toHaveBeenCalled();
+  });
+});

app/soapbox/components/ui/form/form.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 
 interface IForm {
-  disabled?: boolean,
   onSubmit?: (event: React.FormEvent) => void,
 }
 
@@ -15,7 +14,7 @@ const Form: React.FC<IForm> = ({ onSubmit, children, ...filteredProps }) => {
   }, [onSubmit]);
 
   return (
-    <form onSubmit={handleSubmit} className='space-y-4' {...filteredProps}>
+    <form data-testid='form' onSubmit={handleSubmit} className='space-y-4' {...filteredProps}>
       {children}
     </form>
   );