test: wait for element to be rendered in flaky test (#45978)

frontend/src/metabase/query_builder/components/template_tags/TagEditorParam.unit.spec.tsx

@@ -6,7 +6,7 @@ import {
   setupSearchEndpoints,
 } from "__support__/server-mocks";
 import { createMockEntitiesState } from "__support__/store";
-import { renderWithProviders, screen } from "__support__/ui";
+import { renderWithProviders, screen, waitFor } from "__support__/ui";
 import { checkNotNull } from "metabase/lib/types";
 import { getMetadata } from "metabase/selectors/metadata";
 import type { TemplateTag } from "metabase-types/api";
@@ -130,7 +130,9 @@ describe("TagEditorParam", () => {
       });
       const { setTemplateTag } = setup({ tag });
 
-      await userEvent.click(await screen.findByText("People"));
+      await waitForElementsToLoad("People");
+
+      await userEvent.click(screen.getByText("People"));
       await userEvent.click(await screen.findByText("Source"));
 
       expect(setTemplateTag).toHaveBeenCalledWith({
@@ -149,7 +151,9 @@ describe("TagEditorParam", () => {
       });
       const { setTemplateTag } = setup({ tag });
 
-      await userEvent.click(await screen.findByText("People"));
+      await waitForElementsToLoad("People");
+
+      await userEvent.click(screen.getByText("People"));
       await userEvent.click(await screen.findByText("Name"));
 
       expect(setTemplateTag).toHaveBeenCalledWith({
@@ -168,7 +172,9 @@ describe("TagEditorParam", () => {
       });
       const { setTemplateTag } = setup({ tag });
 
-      await userEvent.click(await screen.findByText("Orders"));
+      await waitForElementsToLoad("Orders");
+
+      await userEvent.click(screen.getByText("Orders"));
       await userEvent.click(await screen.findByText("Quantity"));
 
       expect(setTemplateTag).toHaveBeenCalledWith({
@@ -187,7 +193,9 @@ describe("TagEditorParam", () => {
       });
       const { setTemplateTag } = setup({ tag });
 
-      await userEvent.click(await screen.findByText("Reviews"));
+      await waitForElementsToLoad("Reviews");
+
+      await userEvent.click(screen.getByText("Reviews"));
       await userEvent.click(await screen.findByText("Rating"));
 
       expect(setTemplateTag).toHaveBeenCalledWith({
@@ -206,7 +214,9 @@ describe("TagEditorParam", () => {
       });
       const { setTemplateTag } = setup({ tag });
 
-      await userEvent.click(await screen.findByText("Name"));
+      await waitForElementsToLoad("Name");
+
+      await userEvent.click(screen.getByText("Name"));
       await userEvent.click(await screen.findByText("Address"));
 
       expect(setTemplateTag).toHaveBeenCalledWith({
@@ -312,3 +322,12 @@ describe("TagEditorParam", () => {
     });
   });
 });
+
+async function waitForElementsToLoad(text: string) {
+  await waitFor(
+    () => {
+      expect(screen.getByText(text)).toBeInTheDocument();
+    },
+    { timeout: 10000 },
+  );
+}