Convert `FormField` tests to RTL (#49068)

.betterer.results

@@ -8,9 +8,6 @@ exports[`no enzyme tests`] = {
     "packages/grafana-ui/src/components/BarGauge/BarGauge.test.tsx:4199795290": [
       [0, 19, 13, "RegExp match", "2409514259"]
     ],
-    "packages/grafana-ui/src/components/FormField/FormField.test.tsx:3429087660": [
-      [0, 19, 13, "RegExp match", "2409514259"]
-    ],
     "packages/grafana-ui/src/components/Forms/Legacy/Input/Input.test.tsx:3129955645": [
       [0, 19, 13, "RegExp match", "2409514259"]
     ],

packages/grafana-ui/src/components/FormField/FormField.test.tsx

@@ -1,4 +1,4 @@
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 import React from 'react';
 
 import { FormField, Props } from './FormField';
@@ -13,26 +13,20 @@ const setup = (propOverrides?: Partial<Props>) => {
 
   Object.assign(props, propOverrides);
 
-  return shallow(<FormField {...props} />);
+  render(<FormField {...props} />);
 };
 
 describe('FormField', () => {
-  it('should render component with default inputEl', () => {
+  it('should render a default inputEl', () => {
-    const wrapper = setup();
+    setup();
-
+    expect(screen.getByRole('textbox')).toBeInTheDocument();
-    expect(wrapper).toMatchSnapshot();
   });
 
-  it('should render component with custom inputEl', () => {
+  it('should render a custom inputEl instead if specified', () => {
-    const wrapper = setup({
+    setup({
-      inputEl: (
+      inputEl: <input role="checkbox" />,
-        <>
-          <span>Input</span>
-          <button>Ok</button>
-        </>
-      ),
     });
-
+    expect(screen.queryByRole('textbox')).not.toBeInTheDocument();
-    expect(wrapper).toMatchSnapshot();
+    expect(screen.getByRole('checkbox')).toBeInTheDocument();
   });
 });

packages/grafana-ui/src/components/FormField/__snapshots__/FormField.test.tsx.snap

@@ -1,37 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`FormField should render component with custom inputEl 1`] = `
-<div
-  className="css-aq4c43"
->
-  <FormLabel
-    width={11}
-  >
-    Test
-  </FormLabel>
-  <span>
-    Input
-  </span>
-  <button>
-    Ok
-  </button>
-</div>
-`;
-
-exports[`FormField should render component with default inputEl 1`] = `
-<div
-  className="css-aq4c43"
->
-  <FormLabel
-    width={11}
-  >
-    Test
-  </FormLabel>
-  <input
-    className="gf-form-input width-12"
-    onChange={[MockFunction]}
-    type="text"
-    value={10}
-  />
-</div>
-`;