no log: Refactor app structure

4 files changed, 32 insertions, 15 deletions

diff --git a/frontend/test/render.test.tsx b/frontend/src/App/app.test.tsx
index 097b93e49..b5aea7e63 100644
--- a/frontend/test/render.test.tsx
+++ b/frontend/src/App/app.test.tsx
@@ -1,13 +1,13 @@
-import { render } from "@testing-library/react";
+import { render } from "@/tests";
 import { StrictMode } from "react";
 import { describe, it } from "vitest";
-import { Main } from "../src/main";
+import App from ".";
 
 describe("App", () => {
   it("should render without crash", () => {
     render(
       <StrictMode>
-        <Main />
+        <App />
       </StrictMode>
     );
   });
diff --git a/frontend/src/dom.tsx b/frontend/src/dom.tsx
index 8af806070..f8028af36 100644
--- a/frontend/src/dom.tsx
+++ b/frontend/src/dom.tsx
@@ -1,10 +1,20 @@
 import { StrictMode } from "react";
 import ReactDOM from "react-dom";
-import { Main } from "./main";
+import { useRoutes } from "react-router-dom";
+import { AllProviders } from "./providers";
+import { useRouteItems } from "./Router";
+
+const RouteApp = () => {
+  const items = useRouteItems();
+
+  return useRoutes(items);
+};
 
 ReactDOM.render(
   <StrictMode>
-    <Main />
+    <AllProviders>
+      <RouteApp />
+    </AllProviders>
   </StrictMode>,
   document.getElementById("root")
 );
diff --git a/frontend/src/main.tsx b/frontend/src/providers.tsx
index aceab4752..83303843e 100644
--- a/frontend/src/main.tsx
+++ b/frontend/src/providers.tsx
@@ -3,19 +3,13 @@ import ThemeProvider from "@/App/theme";
 import { ModalsProvider } from "@/modules/modals";
 import "@fontsource/roboto/300.css";
 import { NotificationsProvider } from "@mantine/notifications";
+import { FunctionComponent } from "react";
 import { QueryClientProvider } from "react-query";
 import { ReactQueryDevtools } from "react-query/devtools";
-import { useRoutes } from "react-router-dom";
-import { Router, useRouteItems } from "./Router";
+import { Router } from "./Router";
 import { Environment } from "./utilities";
 
-const RouteApp = () => {
-  const items = useRouteItems();
-
-  return useRoutes(items);
-};
-
-export const Main = () => {
+export const AllProviders: FunctionComponent = ({ children }) => {
   return (
     <QueryClientProvider client={queryClient}>
       <ThemeProvider>
@@ -25,7 +19,7 @@ export const Main = () => {
               {Environment.queryDev && (
                 <ReactQueryDevtools initialIsOpen={false} />
               )}
-              <RouteApp></RouteApp>
+              {children}
             </Router>
           </NotificationsProvider>
         </ModalsProvider>
diff --git a/frontend/src/tests/index.tsx b/frontend/src/tests/index.tsx
new file mode 100644
index 000000000..07f286bce
--- /dev/null
+++ b/frontend/src/tests/index.tsx
@@ -0,0 +1,13 @@
+import { AllProviders } from "@/providers";
+import { render, RenderOptions } from "@testing-library/react";
+import { ReactElement } from "react";
+
+const customRender = (
+  ui: ReactElement,
+  options?: Omit<RenderOptions, "wrapper">
+) => render(ui, { wrapper: AllProviders, ...options });
+
+// re-export everything
+export * from "@testing-library/react";
+// override render method
+export { customRender as render };