Add msw and refactor test for more future proof setup

packages/frontend-design-poc/src/app.spec.tsx

@@ -1,11 +1,16 @@
-import { describe, it, expect } from 'vitest';
-import { render } from '@testing-library/react';
-import App from './App.tsx';
+import { beforeAll, describe, expect, it } from "vitest";
+import { customRender } from "../utils/test-utils.tsx";
+import App from "./App.tsx";
+import { server } from "./mocks/node.ts";
 
-describe('App Smoke Test', () => {
-  it('renders without crashing', () => {
-    const { getByTestId } = render(<App />);
-    const appElement = getByTestId('app');
+describe("App Smoke Test", async () => {
+  beforeAll(async () => {
+    server.listen();
+  });
+
+  it("renders without crashing", () => {
+    const { getByRole } = customRender(<App />);
+    const appElement = getByRole("main");
     expect(appElement).toBeTruthy();
   });
 });

packages/frontend-design-poc/src/mocks/node.ts

@@ -0,0 +1,4 @@
+import { setupServer } from 'msw/node'
+import { handlers } from './handlers'
+
+export const server = setupServer(...handlers)

packages/frontend-design-poc/src/pages/PageLayout/PageLayout.tsx

@@ -0,0 +1,26 @@
+import { HeaderContext } from 'app-shared/navigation/main-header/Header';
+import { Outlet } from 'react-router-dom';
+import { useUserQuery } from 'app-shared/hooks/queries';
+import React, { useMemo } from 'react';
+import type { IHeaderContext } from 'app-shared/navigation/main-header/Header';
+import AppHeader from 'app-shared/navigation/main-header/Header';
+
+export const PageLayout = () => {
+  const { data: user } = useUserQuery();
+
+  const headerContextValue: IHeaderContext = useMemo(
+    () => ({
+      user,
+    }),
+    [user],
+  );
+
+  return (
+    <>
+      <HeaderContext.Provider value={headerContextValue}>
+        <AppHeader showMenu={false} />
+      </HeaderContext.Provider>
+      <Outlet />
+    </>
+  );
+};

packages/frontend-design-poc/src/pages/PageLayout/index.ts

@@ -0,0 +1 @@
+export { PageLayout } from './PageLayout';

packages/frontend-design-poc/utils/test-utils.tsx

@@ -0,0 +1,33 @@
+import { QueryClient, QueryClientProvider } from "react-query";
+import { ReactElement } from "react";
+import { MemoryRouter } from "react-router-dom";
+import { render, RenderOptions } from "@testing-library/react";
+
+interface IExtendedRenderOptions extends RenderOptions {
+  initialEntries?: string[];
+}
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      retry: false,
+    },
+  },
+});
+
+export const customRender = (
+  ui: ReactElement,
+  options?: Omit<IExtendedRenderOptions, "wrapper">,
+) => {
+  const Wrapper = ({ children }: { children: React.ReactNode }) => {
+    return (
+      <QueryClientProvider client={queryClient}>
+        <MemoryRouter initialEntries={options?.initialEntries ?? ["/"]}>
+          {children}
+        </MemoryRouter>
+      </QueryClientProvider>
+    );
+  };
+
+  return render(ui, { wrapper: Wrapper, ...options });
+};