diff --git a/webpack/assets/javascripts/react_app/components/common/forms/Form.test.js b/webpack/assets/javascripts/react_app/components/common/forms/Form.test.js
index 7e119ef570..1ef0f0dcd2 100644
--- a/webpack/assets/javascripts/react_app/components/common/forms/Form.test.js
+++ b/webpack/assets/javascripts/react_app/components/common/forms/Form.test.js
@@ -1,23 +1,29 @@
-import { shallow } from 'enzyme';
 import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
 
 import Form from './Form';
 
 describe('Form', () => {
-  it('should render a form', () => {
-    const wrapper = shallow(<Form />);
+  it('renders a form without an error alert', () => {
+    const { container } = render(<Form />);
 
-    expect(wrapper).toMatchSnapshot();
+    expect(container.querySelector('form.form-horizontal')).toBeInTheDocument();
+    expect(container.querySelector('.alert')).not.toBeInTheDocument();
   });
-  it('should display one base error', () => {
-    const wrapper = shallow(
+
+  it('displays one base error with the default title', () => {
+    const { container } = render(
       <Form error={{ errorMsgs: ['invalid something'], severity: 'danger' }} />
     );
 
-    expect(wrapper).toMatchSnapshot();
+    expect(container.querySelector('.alert-danger')).toBeInTheDocument();
+    expect(screen.getByText('Unable to save.')).toBeInTheDocument();
+    expect(screen.getByText('invalid something')).toBeInTheDocument();
   });
-  it('should display multiple base errors', () => {
-    const wrapper = shallow(
+
+  it('displays multiple base errors', () => {
+    render(
       <Form
         error={{
           errorMsgs: ['invalid something', 'error too'],
@@ -26,31 +32,29 @@ describe('Form', () => {
       />
     );
 
-    expect(wrapper).toMatchSnapshot();
+    expect(screen.getByText('invalid something')).toBeInTheDocument();
+    expect(screen.getByText('error too')).toBeInTheDocument();
   });
-  it('should accept base error title', () => {
-    const wrapper = shallow(
+
+  it('accepts a base error title', () => {
+    render(
       <Form
-        error={{
-          errorMsgs: ['invalid something'],
-          severity: 'danger',
-        }}
+        error={{ errorMsgs: ['invalid something'], severity: 'danger' }}
         errorTitle="Oops"
       />
     );
 
-    expect(wrapper).toMatchSnapshot();
+    expect(screen.getByText('Oops')).toBeInTheDocument();
   });
-  it('should dispaly form errors as warning', () => {
-    const wrapper = shallow(
+
+  it('displays form errors as a warning', () => {
+    const { container } = render(
       <Form
-        error={{
-          errorMsgs: ['Do not feed the trolls'],
-          severity: 'warning',
-        }}
+        error={{ errorMsgs: ['Do not feed the trolls'], severity: 'warning' }}
       />
     );
 
-    expect(wrapper).toMatchSnapshot();
+    expect(container.querySelector('.alert-warning')).toBeInTheDocument();
+    expect(screen.getByText('Do not feed the trolls')).toBeInTheDocument();
   });
 });
diff --git a/webpack/assets/javascripts/react_app/components/common/forms/__snapshots__/Form.test.js.snap b/webpack/assets/javascripts/react_app/components/common/forms/__snapshots__/Form.test.js.snap
deleted file mode 100644
index da363924b1..0000000000
--- a/webpack/assets/javascripts/react_app/components/common/forms/__snapshots__/Form.test.js.snap
+++ /dev/null
@@ -1,125 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Form should accept base error title 1`] = `
-<form
-  className="form-horizontal well"
-  onSubmit={[Function]}
->
-  <Alert
-    className="base in fade"
-    onDismiss={null}
-    type="danger"
-  >
-    <AlertBody
-      title="Oops"
-    >
-      <span>
-        invalid something
-      </span>
-    </AlertBody>
-  </Alert>
-  <FormActions
-    disabled={false}
-    onCancel={[Function]}
-    submitting={false}
-  />
-</form>
-`;
-
-exports[`Form should dispaly form errors as warning 1`] = `
-<form
-  className="form-horizontal well"
-  onSubmit={[Function]}
->
-  <Alert
-    className="base in fade"
-    onDismiss={null}
-    type="warning"
-  >
-    <AlertBody
-      title="Unable to save. "
-    >
-      <span>
-        Do not feed the trolls
-      </span>
-    </AlertBody>
-  </Alert>
-  <FormActions
-    disabled={false}
-    onCancel={[Function]}
-    submitting={false}
-  />
-</form>
-`;
-
-exports[`Form should display multiple base errors 1`] = `
-<form
-  className="form-horizontal well"
-  onSubmit={[Function]}
->
-  <Alert
-    className="base in fade"
-    onDismiss={null}
-    type="danger"
-  >
-    <AlertBody
-      title="Unable to save. "
-    >
-      <li
-        key="0"
-      >
-        invalid something
-      </li>
-      <li
-        key="1"
-      >
-        error too
-      </li>
-    </AlertBody>
-  </Alert>
-  <FormActions
-    disabled={false}
-    onCancel={[Function]}
-    submitting={false}
-  />
-</form>
-`;
-
-exports[`Form should display one base error 1`] = `
-<form
-  className="form-horizontal well"
-  onSubmit={[Function]}
->
-  <Alert
-    className="base in fade"
-    onDismiss={null}
-    type="danger"
-  >
-    <AlertBody
-      title="Unable to save. "
-    >
-      <span>
-        invalid something
-      </span>
-    </AlertBody>
-  </Alert>
-  <FormActions
-    disabled={false}
-    onCancel={[Function]}
-    submitting={false}
-  />
-</form>
-`;
-
-exports[`Form should render a form 1`] = `
-<form
-  className="form-horizontal well"
-  onSubmit={[Function]}
->
-  <FormActions
-    disabled={false}
-    onCancel={[Function]}
-    submitting={false}
-  />
-</form>
-`;