Rewrite tests with testing-library/react

jest-setup.js

@@ -1,7 +1 @@
-import { configure } from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
-
-/**
- * Configure
- */
-configure({ adapter: new Adapter() });
+import '@testing-library/jest-dom';

package.json

@@ -7,10 +7,8 @@
     "@grafana/schema": "9.4.7",
     "@grafana/toolkit": "9.4.7",
     "@grafana/ui": "9.4.7",
-    "@types/enzyme": "^3.10.12",
-    "@types/enzyme-adapter-react-16": "^1.0.6",
-    "enzyme": "^3.11.0",
-    "enzyme-adapter-react-16": "^1.15.7",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^14.0.0",
     "react": "18.2.0",
     "react-dom": "18.2.0"
   },

src/components/FieldsEditor/FieldsEditor.test.tsx

@@ -1,5 +1,6 @@
-import { shallow } from 'enzyme';
 import React from 'react';
+import { screen, render } from '@testing-library/react';
+import { TestIds } from '../../constants';
 import { FieldsEditor } from './FieldsEditor';
 
 /**
@@ -13,8 +14,8 @@ describe('Editor', () => {
       return <FieldsEditor {...restProps} query={query} />;
     };
 
-    const wrapper = shallow(getComponent({ model }));
-    const button = wrapper.find('Button');
-    expect(button.exists()).toBeTruthy();
+    render(getComponent({ model }));
+
+    expect(screen.getByTestId(TestIds.fieldsEditor.buttonAdd)).toBeInTheDocument();
   });
 });

src/components/FieldsEditor/FieldsEditor.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Field, FieldType } from '@grafana/data';
 import { Button, InlineField, InlineFieldRow, Input, Select } from '@grafana/ui';
-import { FieldTypes } from '../../constants';
+import { FieldTypes, TestIds } from '../../constants';
 import { DataFrameModel, StaticQuery } from '../../types';
 import { convertToDataFrame } from '../../utils';
 
@@ -133,7 +133,13 @@ export const FieldsEditor = ({ query, model, onChange, onRunQuery }: Props) => {
     return (
       <InlineFieldRow>
         <InlineField>
-          <Button variant="primary" title="Add a Field" onClick={() => addField(0)} icon="plus">
+          <Button
+            variant="primary"
+            title="Add a Field"
+            onClick={() => addField(0)}
+            icon="plus"
+            data-testid={TestIds.fieldsEditor.buttonAdd}
+          >
             Add a Field
           </Button>
         </InlineField>

src/components/QueryEditor/QueryEditor.test.tsx

@@ -1,5 +1,6 @@
-import { shallow } from 'enzyme';
 import React from 'react';
+import { screen, render } from '@testing-library/react';
+import { TestIds } from '../../constants';
 import { QueryEditor } from './QueryEditor';
 
 /**
@@ -13,8 +14,8 @@ describe('Editor', () => {
       return <QueryEditor {...restProps} />;
     };
 
-    const wrapper = shallow(getComponent({ query }));
-    const input = wrapper.find('Input');
-    expect(input.exists()).toBeTruthy();
+    render(getComponent({ query }));
+
+    expect(screen.getByTestId(TestIds.queryEditor.fieldName)).toBeInTheDocument();
   });
 });

src/components/QueryEditor/QueryEditor.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { CoreApp, PreferredVisualisationType, preferredVisualizationTypes, QueryEditorProps } from '@grafana/data';
 import { CollapsableSection, InlineField, InlineFieldRow, Input, Select } from '@grafana/ui';
+import { TestIds } from '../../constants';
 import { DataSource } from '../../datasource';
 import { StaticDataSourceOptions, StaticQuery } from '../../types';
 import { convertToDataFrame, prepareModel } from '../../utils';
@@ -48,7 +49,11 @@ export const QueryEditor: React.FC<Props> = ({ onChange, onRunQuery, query, app
     <>
       <InlineFieldRow>
         <InlineField label="Name" tooltip="Name of the data frame" grow>
-          <Input onChange={(e) => renameFrame(e.currentTarget.value)} value={model.name} />
+          <Input
+            onChange={(e) => renameFrame(e.currentTarget.value)}
+            value={model.name}
+            data-testid={TestIds.queryEditor.fieldName}
+          />
         </InlineField>
 
         {app === CoreApp.Explore && (

src/components/ValueInput/ValueInput.test.tsx

@@ -1,6 +1,7 @@
-import { shallow } from 'enzyme';
 import React from 'react';
 import { FieldType } from '@grafana/data';
+import { screen, render } from '@testing-library/react';
+import { TestIds } from '../../constants';
 import { ValueInput } from './ValueInput';
 
 /**
@@ -12,8 +13,8 @@ describe('Input', () => {
       return <ValueInput {...restProps} />;
     };
 
-    const wrapper = shallow(getComponent({ value: '123', type: FieldType.string }));
-    const input = wrapper.find('Input');
-    expect(input.exists()).toBeTruthy();
+    render(getComponent({ value: '123', type: FieldType.string }));
+
+    expect(screen.getByTestId(TestIds.valueInput.fieldString)).toBeInTheDocument();
   });
 });

src/components/ValueInput/ValueInput.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { DateTime, dateTime, FieldType } from '@grafana/data';
 import { DateTimePicker, Icon, InlineField, Input, TextArea, useStyles2 } from '@grafana/ui';
-import { TextAreaLength } from '../../constants';
+import { TextAreaLength, TestIds } from '../../constants';
 import { Styles } from '../../styles';
 import { NullableString } from '../../types';
 import { verifyFieldValue } from '../../utils';
@@ -147,6 +147,7 @@ export const ValueInput: React.FC<Props> = ({ onChange, value, type, label }) =>
         }}
         value={disabled ? 'null' : value ?? ''}
         suffix={suffixElement}
+        data-testid={TestIds.valueInput.fieldString}
       />
     </InlineField>
   );

src/components/ValuesEditor/ValuesEditor.test.tsx

@@ -1,5 +1,6 @@
-import { shallow } from 'enzyme';
 import React from 'react';
+import { screen, render } from '@testing-library/react';
+import { TestIds } from '../../constants';
 import { ValuesEditor } from './ValuesEditor';
 
 /**
@@ -13,8 +14,8 @@ describe('Editor', () => {
       return <ValuesEditor {...restProps} query={query} />;
     };
 
-    const wrapper = shallow(getComponent({ model }));
-    const button = wrapper.find('Button');
-    expect(button.exists()).toBeTruthy();
+    render(getComponent({ model }));
+
+    expect(screen.getByTestId(TestIds.valuesEditor.buttonAddRow)).toBeInTheDocument();
   });
 });

src/components/ValuesEditor/ValuesEditor.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { FieldType } from '@grafana/data';
 import { Button, InlineField, InlineFieldRow } from '@grafana/ui';
+import { TestIds } from '../../constants';
 import { DataFrameModel, NullableString, StaticQuery } from '../../types';
 import { convertToDataFrame } from '../../utils';
 import { ValueInput } from '../ValueInput';
@@ -125,7 +126,12 @@ export const ValuesEditor = ({ model, query, onChange, onRunQuery }: Props) => {
     return (
       <InlineFieldRow>
         <InlineField>
-          <Button variant="primary" onClick={() => addRow(0)} icon="plus">
+          <Button
+            variant="primary"
+            onClick={() => addRow(0)}
+            icon="plus"
+            data-testid={TestIds.valuesEditor.buttonAddRow}
+          >
             Add a Row
           </Button>
         </InlineField>

src/constants/index.ts

@@ -1,2 +1,3 @@
 export * from './datasource';
 export * from './field';
+export * from './tests';

src/constants/tests.ts

@@ -0,0 +1,17 @@
+/**
+ * Tests Identifiers
+ */
+export const TestIds = {
+  fieldsEditor: {
+    buttonAdd: 'data-testid fields-editor button-add',
+  },
+  queryEditor: {
+    fieldName: 'data-testid query-editor field-name',
+  },
+  valueInput: {
+    fieldString: 'data-testid value-input field-string',
+  },
+  valuesEditor: {
+    buttonAddRow: 'data-testid values-editor button-add-row',
+  },
+};