diff --git a/public/app/plugins/datasource/loki/configuration/DerivedFields.test.tsx b/public/app/plugins/datasource/loki/configuration/DerivedFields.test.tsx
index 47a5761f388..c9172ae9858 100644
--- a/public/app/plugins/datasource/loki/configuration/DerivedFields.test.tsx
+++ b/public/app/plugins/datasource/loki/configuration/DerivedFields.test.tsx
@@ -35,7 +35,8 @@ describe('DerivedFields', () => {
     const onChange = jest.fn();
     render(<DerivedFields onChange={onChange} />);
 
-    userEvent.click(screen.getByText('Add'));
+    const addButton = await screen.findByText('Add');
+    userEvent.click(addButton);
 
     await waitFor(() => expect(onChange).toHaveBeenCalledTimes(1));
   });
@@ -63,12 +64,13 @@ describe('DerivedFields', () => {
     ];
     render(<DerivedFields onChange={jest.fn()} fields={repeatedFields} />);
 
-    userEvent.click(screen.getAllByPlaceholderText('Field name')[0]);
+    const inputs = await screen.findAllByPlaceholderText('Field name');
+    userEvent.click(inputs[0]);
 
     expect(await screen.findAllByText('The name is already in use')).toHaveLength(2);
   });
 
-  it('does not validate empty names as repeated', () => {
+  it('does not validate empty names as repeated', async () => {
     const repeatedFields = [
       {
         matcherRegex: '',
@@ -81,7 +83,8 @@ describe('DerivedFields', () => {
     ];
     render(<DerivedFields onChange={jest.fn()} fields={repeatedFields} />);
 
-    userEvent.click(screen.getAllByPlaceholderText('Field name')[0]);
+    const inputs = await screen.findAllByPlaceholderText('Field name');
+    userEvent.click(inputs[0]);
 
     expect(screen.queryByText('The name is already in use')).not.toBeInTheDocument();
   });