diff --git a/webpack/assets/javascripts/react_app/components/common/forms/__tests__/FormField.test.js b/webpack/assets/javascripts/react_app/components/common/forms/__tests__/FormField.test.js
index 15dcbe4d79..7c9855f949 100644
--- a/webpack/assets/javascripts/react_app/components/common/forms/__tests__/FormField.test.js
+++ b/webpack/assets/javascripts/react_app/components/common/forms/__tests__/FormField.test.js
@@ -1,4 +1,6 @@
-import { testComponentSnapshotsWithFixtures } from '../../../../common/testHelpers';
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
 import {
   dateTimeWithErrorProps,
   textFieldWithHelpProps,
@@ -6,18 +8,50 @@ import {
 } from '../FormField.fixtures';
 import FormField from '../FormField';
 
-const fixtures = {
-  'renders text input': { type: 'text', name: 'a' },
-  'renders Date input': { type: 'date', name: 'a' },
-  'renders Time input': { type: 'time', name: 'a' },
-  'renders DateTime input': { type: 'dateTime', name: 'a' },
-  'renders text complex options and help': textFieldWithHelpProps,
-  'renders DateTime complex options and error': dateTimeWithErrorProps,
-  'renders AutoComplete': { type: 'autocomplete', formAutocompleteDataProps },
-};
+// Stub InputFactory so FormField's own wiring (label, type, validation) can be
+// asserted without rendering each concrete input (date pickers, autocomplete…).
+jest.mock('../InputFactory', () => props => (
+  <div
+    data-testid="input-factory"
+    data-type={props.type}
+    data-name={props.name}
+  />
+));
+
+const inputFactory = () => screen.getByTestId('input-factory');
 
 describe('FormField', () => {
-  describe('rendering', () => {
-    testComponentSnapshotsWithFixtures(FormField, fixtures);
+  it.each([
+    ['text', 'a'],
+    ['date', 'a'],
+    ['time', 'a'],
+    ['dateTime', 'a'],
+  ])('renders an InputFactory for type %s', (type, name) => {
+    render(<FormField type={type} name={name} />);
+
+    expect(inputFactory()).toHaveAttribute('data-type', type);
+    expect(inputFactory()).toHaveAttribute('data-name', name);
+  });
+
+  it('renders the label and label help', () => {
+    const { container } = render(<FormField {...textFieldWithHelpProps} />);
+
+    expect(screen.getByText('textField')).toBeInTheDocument();
+    expect(container.querySelector('.field-help')).toBeInTheDocument();
+    expect(inputFactory()).toHaveAttribute('data-type', 'text');
+  });
+
+  it('renders the error message and sets the error validation state', () => {
+    const { container } = render(<FormField {...dateTimeWithErrorProps} />);
+
+    expect(screen.getByText('DateTime with error')).toBeInTheDocument();
+    expect(screen.getByText('can not be in the past')).toBeInTheDocument();
+    expect(container.querySelector('.form-group')).toHaveClass('has-error');
+  });
+
+  it('renders an autocomplete InputFactory', () => {
+    render(<FormField type="autocomplete" {...formAutocompleteDataProps} />);
+
+    expect(inputFactory()).toHaveAttribute('data-type', 'autocomplete');
   });
 });
diff --git a/webpack/assets/javascripts/react_app/components/common/forms/__tests__/__snapshots__/FormField.test.js.snap b/webpack/assets/javascripts/react_app/components/common/forms/__tests__/__snapshots__/FormField.test.js.snap
deleted file mode 100644
index 21ebc24cf6..0000000000
--- a/webpack/assets/javascripts/react_app/components/common/forms/__tests__/__snapshots__/FormField.test.js.snap
+++ /dev/null
@@ -1,285 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`FormField rendering renders AutoComplete 1`] = `
-<FormGroup
-  bsClass="form-group"
-  controlId={null}
-  disabled={false}
-  validationState={null}
->
-  <ControlLabel
-    bsClass="control-label"
-    className="col-md-2"
-    srOnly={false}
-  />
-  <Col
-    bsClass="col"
-    className="col-md-4"
-    componentClass="div"
-  >
-    <InputFactory
-      className=""
-      disabled={false}
-      formAutocompleteDataProps={
-        Object {
-          "controller": "bookmarks",
-          "disabled": false,
-          "id": "form-search",
-          "name": "Filter[search]",
-          "searchQuery": "",
-          "url": "bookmarks/auto_complete",
-          "useKeyShortcuts": false,
-        }
-      }
-      id={null}
-      onChange={[Function]}
-      required={false}
-      setError={[Function]}
-      setWarning={[Function]}
-      type="autocomplete"
-    />
-  </Col>
-  <InlineMessage
-    error={null}
-    helpInline={null}
-    warning={null}
-  />
-</FormGroup>
-`;
-
-exports[`FormField rendering renders Date input 1`] = `
-<FormGroup
-  bsClass="form-group"
-  controlId={null}
-  disabled={false}
-  validationState={null}
->
-  <ControlLabel
-    bsClass="control-label"
-    className="col-md-2"
-    srOnly={false}
-  />
-  <Col
-    bsClass="col"
-    className="col-md-4"
-    componentClass="div"
-  >
-    <InputFactory
-      className=""
-      disabled={false}
-      id={null}
-      name="a"
-      onChange={[Function]}
-      required={false}
-      setError={[Function]}
-      setWarning={[Function]}
-      type="date"
-    />
-  </Col>
-  <InlineMessage
-    error={null}
-    helpInline={null}
-    warning={null}
-  />
-</FormGroup>
-`;
-
-exports[`FormField rendering renders DateTime complex options and error 1`] = `
-<FormGroup
-  bsClass="form-group"
-  controlId="date-time"
-  disabled={false}
-  validationState="error"
->
-  <ControlLabel
-    bsClass="control-label"
-    className="col-md-2"
-    srOnly={false}
-  >
-    DateTime with error
-  </ControlLabel>
-  <Col
-    bsClass="col"
-    className="col-md-4"
-    componentClass="div"
-  >
-    <InputFactory
-      className=""
-      disabled={false}
-      id="date-time"
-      name="group[datetime]"
-      onChange={[Function]}
-      required={false}
-      setError={[Function]}
-      setWarning={[Function]}
-      type="dateTime"
-      value={1991-01-01T01:12:01.000Z}
-    />
-  </Col>
-  <InlineMessage
-    error="can not be in the past"
-    helpInline={null}
-    warning={null}
-  />
-</FormGroup>
-`;
-
-exports[`FormField rendering renders DateTime input 1`] = `
-<FormGroup
-  bsClass="form-group"
-  controlId={null}
-  disabled={false}
-  validationState={null}
->
-  <ControlLabel
-    bsClass="control-label"
-    className="col-md-2"
-    srOnly={false}
-  />
-  <Col
-    bsClass="col"
-    className="col-md-4"
-    componentClass="div"
-  >
-    <InputFactory
-      className=""
-      disabled={false}
-      id={null}
-      name="a"
-      onChange={[Function]}
-      required={false}
-      setError={[Function]}
-      setWarning={[Function]}
-      type="dateTime"
-    />
-  </Col>
-  <InlineMessage
-    error={null}
-    helpInline={null}
-    warning={null}
-  />
-</FormGroup>
-`;
-
-exports[`FormField rendering renders Time input 1`] = `
-<FormGroup
-  bsClass="form-group"
-  controlId={null}
-  disabled={false}
-  validationState={null}
->
-  <ControlLabel
-    bsClass="control-label"
-    className="col-md-2"
-    srOnly={false}
-  />
-  <Col
-    bsClass="col"
-    className="col-md-4"
-    componentClass="div"
-  >
-    <InputFactory
-      className=""
-      disabled={false}
-      id={null}
-      name="a"
-      onChange={[Function]}
-      required={false}
-      setError={[Function]}
-      setWarning={[Function]}
-      type="time"
-    />
-  </Col>
-  <InlineMessage
-    error={null}
-    helpInline={null}
-    warning={null}
-  />
-</FormGroup>
-`;
-
-exports[`FormField rendering renders text complex options and help 1`] = `
-<FormGroup
-  bsClass="form-group"
-  controlId="text-field"
-  disabled={false}
-  validationState={null}
->
-  <ControlLabel
-    bsClass="control-label"
-    className="col-md-2"
-    srOnly={false}
-  >
-    textField
-    <FieldLevelHelp
-      buttonClass="field-help"
-      content={
-        <React.Fragment>
-          This is more helpful text
-        </React.Fragment>
-      }
-      placement="right"
-      rootClose={true}
-    />
-  </ControlLabel>
-  <Col
-    bsClass="col"
-    className="col-md-4"
-    componentClass="div"
-  >
-    <InputFactory
-      className=""
-      disabled={false}
-      id="text-field"
-      name="group[textfield]"
-      onChange={[Function]}
-      required={false}
-      setError={[Function]}
-      setWarning={[Function]}
-      type="text"
-    />
-  </Col>
-  <InlineMessage
-    error={null}
-    helpInline={null}
-    warning={null}
-  />
-</FormGroup>
-`;
-
-exports[`FormField rendering renders text input 1`] = `
-<FormGroup
-  bsClass="form-group"
-  controlId={null}
-  disabled={false}
-  validationState={null}
->
-  <ControlLabel
-    bsClass="control-label"
-    className="col-md-2"
-    srOnly={false}
-  />
-  <Col
-    bsClass="col"
-    className="col-md-4"
-    componentClass="div"
-  >
-    <InputFactory
-      className=""
-      disabled={false}
-      id={null}
-      name="a"
-      onChange={[Function]}
-      required={false}
-      setError={[Function]}
-      setWarning={[Function]}
-      type="text"
-    />
-  </Col>
-  <InlineMessage
-    error={null}
-    helpInline={null}
-    warning={null}
-  />
-</FormGroup>
-`;