diff --git a/.betterer.results b/.betterer.results
index 1746f2acc6d..055f09fc45a 100644
--- a/.betterer.results
+++ b/.betterer.results
@@ -76,9 +76,6 @@ exports[`no enzyme tests`] = {
     ],
     "public/app/plugins/datasource/cloudwatch/components/ConfigEditor.test.tsx:4057721851": [
       [1, 19, 13, "RegExp match", "2409514259"]
-    ],
-    "public/app/plugins/datasource/loki/configuration/DerivedFields.test.tsx:2402631398": [
-      [0, 17, 13, "RegExp match", "2409514259"]
     ]
   }`
 };
@@ -6928,16 +6925,6 @@ exports[`better eslint`] = {
       [0, 0, 0, "Do not use any type assertions.", "0"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "1"]
     ],
-    "public/app/plugins/datasource/loki/configuration/DerivedFields.test.tsx:5381": [
-      [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "1"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "2"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "3"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "4"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "5"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "6"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "7"]
-    ],
     "public/app/plugins/datasource/loki/datasource.ts:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "1"],
diff --git a/public/app/plugins/datasource/loki/configuration/DerivedField.tsx b/public/app/plugins/datasource/loki/configuration/DerivedField.tsx
index 34997247f3d..03623ae59b1 100644
--- a/public/app/plugins/datasource/loki/configuration/DerivedField.tsx
+++ b/public/app/plugins/datasource/loki/configuration/DerivedField.tsx
@@ -60,7 +60,7 @@ export const DerivedField = (props: Props) => {
   };
 
   return (
-    <div className={className}>
+    <div className={className} data-testid="derived-field">
       <div className={styles.row}>
         <FormField
           className={styles.nameField}
diff --git a/public/app/plugins/datasource/loki/configuration/DerivedFields.test.tsx b/public/app/plugins/datasource/loki/configuration/DerivedFields.test.tsx
index aafaf7a2816..3d6259a99b4 100644
--- a/public/app/plugins/datasource/loki/configuration/DerivedFields.test.tsx
+++ b/public/app/plugins/datasource/loki/configuration/DerivedFields.test.tsx
@@ -1,10 +1,6 @@
-import { mount } from 'enzyme';
+import { render, screen, waitFor, fireEvent } from '@testing-library/react';
 import React from 'react';
-import { act } from 'react-dom/test-utils';
 
-import { Button } from '@grafana/ui';
-
-import { DerivedField } from './DerivedField';
 import { DerivedFields } from './DerivedFields';
 
 describe('DerivedFields', () => {
@@ -18,65 +14,38 @@ describe('DerivedFields', () => {
     window.getSelection = originalGetSelection;
   });
 
-  it('renders correctly when no fields', async () => {
-    let wrapper: any;
-    //@ts-ignore
-    await act(async () => {
-      wrapper = await mount(<DerivedFields onChange={() => {}} />);
-    });
-    expect(wrapper.find(Button).length).toBe(1);
-    expect(wrapper.find(Button).contains('Add')).toBeTruthy();
-    expect(wrapper.find(DerivedField).length).toBe(0);
+  it('renders correctly when no fields', () => {
+    render(<DerivedFields onChange={() => {}} />);
+
+    expect(screen.getByText('Add')).toBeInTheDocument();
+    expect(screen.queryByText(/example log message/)).not.toBeInTheDocument();
+    expect(screen.queryByTestId('derived-field')).not.toBeInTheDocument();
   });
 
   it('renders correctly when there are fields', async () => {
-    let wrapper: any;
-    //@ts-ignore
-    await act(async () => {
-      wrapper = await mount(<DerivedFields value={testValue} onChange={() => {}} />);
-    });
+    render(<DerivedFields value={testValue} onChange={() => {}} />);
 
-    expect(wrapper.find(Button).filterWhere((button: any) => button.contains('Add')).length).toBe(1);
-    expect(wrapper.find(Button).filterWhere((button: any) => button.contains('Show example log message')).length).toBe(
-      1
-    );
-    expect(
-      wrapper
-        .find(Button)
-        .filterWhere((button: any) => button.contains('Show example log message'))
-        .getDOMNode()
-    ).toHaveAttribute('type', 'button');
-    expect(wrapper.find(DerivedField).length).toBe(2);
+    await waitFor(() => expect(screen.getAllByTestId('derived-field')).toHaveLength(2));
+    expect(screen.getByText('Add')).toBeInTheDocument();
+    expect(screen.getByText('Show example log message')).toBeInTheDocument();
   });
 
-  it('adds new field', async () => {
-    const onChangeMock = jest.fn();
-    let wrapper: any;
-    //@ts-ignore
-    await act(async () => {
-      wrapper = await mount(<DerivedFields onChange={onChangeMock} />);
-    });
-    const addButton = wrapper.find(Button).filterWhere((button: any) => button.contains('Add'));
-    addButton.simulate('click');
-    expect(onChangeMock.mock.calls[0][0].length).toBe(1);
+  it('adds a new field', async () => {
+    const onChange = jest.fn();
+    render(<DerivedFields onChange={onChange} />);
+
+    fireEvent.click(screen.getByText('Add'));
+
+    await waitFor(() => expect(onChange).toHaveBeenCalledTimes(1));
   });
 
-  it('removes field', async () => {
-    const onChangeMock = jest.fn();
-    let wrapper: any;
-    //@ts-ignore
-    await act(async () => {
-      wrapper = await mount(<DerivedFields value={testValue} onChange={onChangeMock} />);
-    });
-    const removeButton = wrapper.find(DerivedField).at(0).find(Button);
-    removeButton.simulate('click');
-    const newValue = onChangeMock.mock.calls[0][0];
-    expect(newValue.length).toBe(1);
-    expect(newValue[0]).toMatchObject({
-      matcherRegex: 'regex2',
-      name: 'test2',
-      url: 'localhost2',
-    });
+  it('removes a field', async () => {
+    const onChange = jest.fn();
+    render(<DerivedFields value={testValue} onChange={onChange} />);
+
+    fireEvent.click((await screen.findAllByTitle('Remove field'))[0]);
+
+    await waitFor(() => expect(onChange).toHaveBeenCalledWith([testValue[1]]));
   });
 });
 
diff --git a/public/app/plugins/datasource/loki/configuration/DerivedFields.tsx b/public/app/plugins/datasource/loki/configuration/DerivedFields.tsx
index fd7ef7ff1b5..d513177b1de 100644
--- a/public/app/plugins/datasource/loki/configuration/DerivedFields.tsx
+++ b/public/app/plugins/datasource/loki/configuration/DerivedFields.tsx
@@ -24,8 +24,7 @@ type Props = {
   onChange: (value: DerivedFieldConfig[]) => void;
 };
 
-export const DerivedFields = (props: Props) => {
-  const { value, onChange } = props;
+export const DerivedFields = ({ value = [], onChange }: Props) => {
   const theme = useTheme2();
   const styles = getStyles(theme);
 
@@ -40,34 +39,33 @@ export const DerivedFields = (props: Props) => {
       </div>
 
       <div className="gf-form-group">
-        {value &&
-          value.map((field, index) => {
-            return (
-              <DerivedField
-                className={styles.derivedField}
-                key={index}
-                value={field}
-                onChange={(newField) => {
-                  const newDerivedFields = [...value];
-                  newDerivedFields.splice(index, 1, newField);
-                  onChange(newDerivedFields);
-                }}
-                onDelete={() => {
-                  const newDerivedFields = [...value];
-                  newDerivedFields.splice(index, 1);
-                  onChange(newDerivedFields);
-                }}
-                suggestions={[
-                  {
-                    value: DataLinkBuiltInVars.valueRaw,
-                    label: 'Raw value',
-                    documentation: 'Exact string captured by the regular expression',
-                    origin: VariableOrigin.Value,
-                  },
-                ]}
-              />
-            );
-          })}
+        {value.map((field, index) => {
+          return (
+            <DerivedField
+              className={styles.derivedField}
+              key={index}
+              value={field}
+              onChange={(newField) => {
+                const newDerivedFields = [...value];
+                newDerivedFields.splice(index, 1, newField);
+                onChange(newDerivedFields);
+              }}
+              onDelete={() => {
+                const newDerivedFields = [...value];
+                newDerivedFields.splice(index, 1);
+                onChange(newDerivedFields);
+              }}
+              suggestions={[
+                {
+                  value: DataLinkBuiltInVars.valueRaw,
+                  label: 'Raw value',
+                  documentation: 'Exact string captured by the regular expression',
+                  origin: VariableOrigin.Value,
+                },
+              ]}
+            />
+          );
+        })}
         <div>
           <Button
             variant="secondary"
@@ -77,14 +75,14 @@ export const DerivedFields = (props: Props) => {
             icon="plus"
             onClick={(event) => {
               event.preventDefault();
-              const newDerivedFields = [...(value || []), { name: '', matcherRegex: '' }];
+              const newDerivedFields = [...value, { name: '', matcherRegex: '' }];
               onChange(newDerivedFields);
             }}
           >
             Add
           </Button>
 
-          {value && value.length > 0 && (
+          {value.length > 0 && (
             <Button variant="secondary" type="button" onClick={() => setShowDebug(!showDebug)}>
               {showDebug ? 'Hide example log message' : 'Show example log message'}
             </Button>