chore(site): fix inconsistent fetching results on tests (#10215)

site/src/App.tsx

@@ -1,7 +1,7 @@
 import CssBaseline from "@mui/material/CssBaseline";
 import { QueryClient, QueryClientProvider } from "react-query";
 import { AuthProvider } from "components/AuthProvider/AuthProvider";
-import { FC, PropsWithChildren } from "react";
+import { FC, PropsWithChildren, ReactNode } from "react";
 import { HelmetProvider } from "react-helmet-async";
 import { AppRouter } from "./AppRouter";
 import { ErrorBoundary } from "./components/ErrorBoundary/ErrorBoundary";
@@ -14,7 +14,7 @@ import {
 } from "@mui/material/styles";
 import { ThemeProvider as EmotionThemeProvider } from "@emotion/react";
 
-const queryClient = new QueryClient({
+const defaultQueryClient = new QueryClient({
   defaultOptions: {
     queries: {
       retry: false,
@@ -25,24 +25,38 @@ const queryClient = new QueryClient({
   },
 });
 
-export const AppProviders: FC<PropsWithChildren> = ({ children }) => {
+export const ThemeProviders: FC<PropsWithChildren> = ({ children }) => {
+  return (
+    <StyledEngineProvider injectFirst>
+      <MuiThemeProvider theme={dark}>
+        <EmotionThemeProvider theme={dark}>
+          <CssBaseline enableColorScheme />
+          {children}
+        </EmotionThemeProvider>
+      </MuiThemeProvider>
+    </StyledEngineProvider>
+  );
+};
+
+export const AppProviders = ({
+  children,
+  queryClient = defaultQueryClient,
+}: {
+  children: ReactNode;
+  queryClient?: QueryClient;
+}) => {
   return (
     <HelmetProvider>
-      <StyledEngineProvider injectFirst>
-        <MuiThemeProvider theme={dark}>
-          <EmotionThemeProvider theme={dark}>
-            <CssBaseline enableColorScheme />
-            <ErrorBoundary>
-              <QueryClientProvider client={queryClient}>
-                <AuthProvider>
-                  {children}
-                  <GlobalSnackbar />
-                </AuthProvider>
-              </QueryClientProvider>
-            </ErrorBoundary>
-          </EmotionThemeProvider>
-        </MuiThemeProvider>
-      </StyledEngineProvider>
+      <ThemeProviders>
+        <ErrorBoundary>
+          <QueryClientProvider client={queryClient}>
+            <AuthProvider>
+              {children}
+              <GlobalSnackbar />
+            </AuthProvider>
+          </QueryClientProvider>
+        </ErrorBoundary>
+      </ThemeProviders>
     </HelmetProvider>
   );
 };

site/src/pages/WorkspacePage/WorkspacePage.test.tsx

@@ -26,10 +26,7 @@ import {
 } from "testHelpers/entities";
 import * as api from "api/api";
 import { Workspace } from "api/typesGenerated";
-import {
-  renderWithAuth,
-  waitForLoaderToBeRemoved,
-} from "testHelpers/renderHelpers";
+import { renderWithAuth } from "testHelpers/renderHelpers";
 import { server } from "testHelpers/server";
 import { WorkspacePage } from "./WorkspacePage";
 
@@ -50,8 +47,7 @@ const renderWorkspacePage = async () => {
     route: `/@${MockWorkspace.owner_name}/${MockWorkspace.name}`,
     path: "/:username/:workspace",
   });
-
-  await waitForLoaderToBeRemoved();
+  await screen.findByText(MockWorkspace.name);
 };
 
 /**

site/src/testHelpers/renderHelpers.tsx

@@ -1,9 +1,5 @@
-import {
-  render as tlRender,
-  screen,
-  waitForElementToBeRemoved,
-} from "@testing-library/react";
-import { AppProviders } from "App";
+import { render as tlRender, screen, waitFor } from "@testing-library/react";
+import { AppProviders, ThemeProviders } from "App";
 import { DashboardLayout } from "components/Dashboard/DashboardLayout";
 import { TemplateSettingsLayout } from "pages/TemplateSettingsPage/TemplateSettingsLayout";
 import { WorkspaceSettingsLayout } from "pages/WorkspaceSettingsPage/WorkspaceSettingsLayout";
@@ -15,14 +11,28 @@ import {
 import { RequireAuth } from "../components/RequireAuth/RequireAuth";
 import { MockUser } from "./entities";
 import { ReactNode } from "react";
+import { QueryClient } from "react-query";
 
 export const renderWithRouter = (
   router: ReturnType<typeof createMemoryRouter>,
 ) => {
+  // Create one query client for each render isolate it avoid other
+  // tests to be affected
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: {
+        retry: false,
+        cacheTime: 0,
+        refetchOnWindowFocus: false,
+        networkMode: "offlineFirst",
+      },
+    },
+  });
+
   return {
     ...tlRender(
-      <AppProviders>
-        (<RouterProvider router={router} />)
+      <AppProviders queryClient={queryClient}>
+        <RouterProvider router={router} />
       </AppProviders>,
     ),
     router,
@@ -159,10 +169,17 @@ export function renderWithWorkspaceSettingsLayout(
   };
 }
 
-export const waitForLoaderToBeRemoved = (): Promise<void> =>
-  // Sometimes, we have pages that are doing a lot of requests to get done, so the
-  // default timeout of 1_000 is not enough. We should revisit this when we unify
-  // some of the endpoints
-  waitForElementToBeRemoved(() => screen.queryByTestId("loader"), {
-    timeout: 5_000,
-  });
+export const waitForLoaderToBeRemoved = async (): Promise<void> => {
+  return waitFor(
+    () => {
+      expect(screen.queryByTestId("loader")).not.toBeInTheDocument();
+    },
+    {
+      timeout: 5_000,
+    },
+  );
+};
+
+export const renderComponent = (component: React.ReactNode) => {
+  return tlRender(<ThemeProviders>{component}</ThemeProviders>);
+};