convert ConfigEditor test to RTL (#54636)

.betterer.results

@@ -83,9 +83,6 @@ exports[`no enzyme tests`] = {
     "public/app/plugins/datasource/loki/components/LokiQueryEditor.test.tsx:146069464": [
       [0, 19, 13, "RegExp match", "2409514259"]
     ],
-    "public/app/plugins/datasource/loki/configuration/ConfigEditor.test.tsx:2659566901": [
-      [0, 17, 13, "RegExp match", "2409514259"]
-    ],
     "public/app/plugins/datasource/loki/configuration/DerivedFields.test.tsx:2402631398": [
       [0, 17, 13, "RegExp match", "2409514259"]
     ]

public/app/plugins/datasource/loki/configuration/ConfigEditor.test.tsx

@@ -1,31 +1,36 @@
-import { mount } from 'enzyme';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import React from 'react';
 
-import { DataSourceHttpSettings } from '@grafana/ui';
-
 import { createDefaultConfigOptions } from '../mocks';
 
 import { ConfigEditor } from './ConfigEditor';
-import { DerivedFields } from './DerivedFields';
 
 describe('ConfigEditor', () => {
   it('should render without error', () => {
-    mount(<ConfigEditor onOptionsChange={() => {}} options={createDefaultConfigOptions()} />);
+    expect(() =>
+      render(<ConfigEditor onOptionsChange={() => {}} options={createDefaultConfigOptions()} />)
+    ).not.toThrow();
   });
 
   it('should render the right sections', () => {
-    const wrapper = mount(<ConfigEditor onOptionsChange={() => {}} options={createDefaultConfigOptions()} />);
+    render(<ConfigEditor onOptionsChange={() => {}} options={createDefaultConfigOptions()} />);
-    expect(wrapper.find(DataSourceHttpSettings).length).toBe(1);
+    expect(screen.getByRole('heading', { name: 'HTTP' })).toBeInTheDocument();
-    expect(wrapper.find({ label: 'Maximum lines' }).length).toBe(1);
+    expect(screen.getByText('Maximum lines')).toBeInTheDocument();
-    expect(wrapper.find(DerivedFields).length).toBe(1);
+    expect(screen.getByRole('heading', { name: 'Derived fields' })).toBeInTheDocument();
   });
 
-  it('should pass correct data to onChange', () => {
+  it('should pass correct data to onChange', async () => {
     const onChangeMock = jest.fn();
-    const wrapper = mount(<ConfigEditor onOptionsChange={onChangeMock} options={createDefaultConfigOptions()} />);
+    render(<ConfigEditor onOptionsChange={onChangeMock} options={createDefaultConfigOptions()} />);
-    const inputWrapper = wrapper.find({ label: 'Maximum lines' }).find('input');
+    const maxLinesInput = await screen.findByDisplayValue('531');
-    inputWrapper.getDOMNode<HTMLInputElement>().value = '42';
+    await userEvent.type(maxLinesInput, '2');
-    inputWrapper.simulate('change');
+    expect(onChangeMock).toHaveBeenCalledWith(
-    expect(onChangeMock.mock.calls[0][0].jsonData.maxLines).toBe('42');
+      expect.objectContaining({
+        jsonData: expect.objectContaining({
+          maxLines: '5312',
+        }),
+      })
+    );
   });
 });