convert DerivedField test to RTL (#54334)

.betterer.results

@@ -86,9 +86,6 @@ exports[`no enzyme tests`] = {
     "public/app/plugins/datasource/loki/configuration/ConfigEditor.test.tsx:2659566901": [
       [0, 17, 13, "RegExp match", "2409514259"]
     ],
-    "public/app/plugins/datasource/loki/configuration/DerivedField.test.tsx:3764084053": [
-      [0, 19, 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/DerivedField.test.tsx

@@ -1,68 +1,93 @@
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 import React from 'react';
 
 import { DataSourceInstanceSettings, DataSourcePluginMeta } from '@grafana/data';
-import { DataSourcePicker } from '@grafana/runtime';
+import { selectors } from '@grafana/e2e-selectors';
+import { setDataSourceSrv } from '@grafana/runtime';
 
 import { DerivedField } from './DerivedField';
 
-jest.mock('app/features/plugins/datasource_srv', () => ({
+const mockList = jest.fn();
-  getDatasourceSrv() {
-    return {
-      getExternal(): DataSourceInstanceSettings[] {
-        return [
-          {
-            id: 1,
-            uid: 'metrics',
-            name: 'metrics_ds',
-            meta: {
-              tracing: false,
-            } as DataSourcePluginMeta,
-          } as DataSourceInstanceSettings,
-
-          {
-            id: 2,
-            uid: 'tracing',
-            name: 'tracing_ds',
-            meta: {
-              tracing: true,
-            } as DataSourcePluginMeta,
-          } as DataSourceInstanceSettings,
-        ];
-      },
-    };
-  },
-}));
 
 describe('DerivedField', () => {
-  it('shows internal link if uid is set', () => {
+  beforeEach(() => {
+    setDataSourceSrv({
+      get: jest.fn(),
+      reload: jest.fn(),
+      getInstanceSettings: jest.fn(),
+      getList: mockList.mockImplementation(() => [
+        {
+          id: 1,
+          uid: 'metrics',
+          name: 'metrics_ds',
+          meta: {
+            tracing: false,
+            info: {
+              logos: {
+                small: '',
+              },
+            },
+          } as DataSourcePluginMeta,
+        } as DataSourceInstanceSettings,
+        {
+          id: 2,
+          uid: 'tracing',
+          name: 'tracing_ds',
+          meta: {
+            tracing: true,
+            info: {
+              logos: {
+                small: '',
+              },
+            },
+          } as DataSourcePluginMeta,
+        } as DataSourceInstanceSettings,
+      ]),
+    });
+  });
+
+  it('shows internal link if uid is set', async () => {
     const value = {
       matcherRegex: '',
       name: '',
       datasourceUid: 'test',
     };
-    const wrapper = shallow(<DerivedField value={value} onChange={() => {}} onDelete={() => {}} suggestions={[]} />);
+    // Render and wait for the Name field to be visible
+    // using findBy to wait for asynchronous operations to complete
+    render(<DerivedField value={value} onChange={() => {}} onDelete={() => {}} suggestions={[]} />);
+    expect(await screen.findByText('Name')).toBeInTheDocument();
 
-    expect(wrapper.find(DataSourcePicker).length).toBe(1);
+    expect(screen.getByLabelText(selectors.components.DataSourcePicker.inputV2)).toBeInTheDocument();
   });
 
-  it('shows url link if uid is not set', () => {
+  it('shows url link if uid is not set', async () => {
     const value = {
       matcherRegex: '',
       name: '',
       url: 'test',
     };
-    const wrapper = shallow(<DerivedField value={value} onChange={() => {}} onDelete={() => {}} suggestions={[]} />);
+    // Render and wait for the Name field to be visible
-    expect(wrapper.find(DataSourcePicker).length).toBe(0);
+    // using findBy to wait for asynchronous operations to complete
+    render(<DerivedField value={value} onChange={() => {}} onDelete={() => {}} suggestions={[]} />);
+    expect(await screen.findByText('Name')).toBeInTheDocument();
+
+    expect(screen.queryByLabelText(selectors.components.DataSourcePicker.inputV2)).not.toBeInTheDocument();
   });
 
-  it('shows only tracing datasources for internal link', () => {
+  it('shows only tracing datasources for internal link', async () => {
     const value = {
       matcherRegex: '',
       name: '',
       datasourceUid: 'test',
     };
-    const wrapper = shallow(<DerivedField value={value} onChange={() => {}} onDelete={() => {}} suggestions={[]} />);
+    // Render and wait for the Name field to be visible
-    expect(wrapper.find(DataSourcePicker).props().tracing).toEqual(true);
+    // using findBy to wait for asynchronous operations to complete
+    render(<DerivedField value={value} onChange={() => {}} onDelete={() => {}} suggestions={[]} />);
+    expect(await screen.findByText('Name')).toBeInTheDocument();
+    expect(mockList).toHaveBeenCalledWith(
+      expect.objectContaining({
+        tracing: true,
+      })
+    );
   });
 });