add test suite for useOrg hook and renderHookWithProviders mock

client/app/components/Org/OrgSelect.spec.tsx

@@ -8,7 +8,7 @@ import { mockSiteEndpoints } from '~/mocks/handlers';
 const server = setupServer(...mockSiteEndpoints);
 afterEach(() => cleanup());
 beforeAll(() => server.listen());
-afterAll(() => server.close()); // Disable API mocking after the tests are done.
+afterAll(() => server.close());
 
 describe('OrgSelect Component', () => {
   it('renders', () => {

client/app/hooks/useOrg/useOrg.spec.tsx

@@ -0,0 +1,43 @@
+import { useOrg } from './useOrg';
+import { useSearchParams } from 'react-router-dom';
+import { afterAll, afterEach, beforeAll, describe, expect, it, Mock, vi } from 'vitest';
+import { setupServer } from 'msw/node';
+import { mockSiteEndpoints } from '~/mocks/handlers';
+import { cleanup, renderHookWithProviders as renderHook } from '~/mocks';
+import { act } from '@testing-library/react';
+
+const server = setupServer(...mockSiteEndpoints);
+afterEach(() => cleanup());
+beforeAll(() => server.listen());
+afterAll(() => server.close());
+
+describe('useOrg Hook', () => {
+  vi.mock('react-router-dom', async (importOriginal) => ({
+    ...(await importOriginal<typeof import('react-router-dom')>()),
+    useSearchParams: vi.fn(),
+  }));
+  it('returns the initial orgId from search params', async () => {
+    const setSearchParams = vi.fn();
+    const searchParams = new URLSearchParams('org=myOrg');
+    (useSearchParams as Mock).mockReturnValue([searchParams, setSearchParams]);
+
+    const { result } = renderHook(() => useOrg());
+
+    expect(result.current.orgId).toBe('myOrg');
+  });
+
+  it('sets the orgId state and updates search params', () => {
+    const setSearchParams = vi.fn();
+    const searchParams = new URLSearchParams();
+    (useSearchParams as Mock).mockReturnValue([searchParams, setSearchParams]);
+
+    const { result } = renderHook(() => useOrg());
+
+    act(() => {
+      result.current.setOrgId('new-org');
+    });
+
+    expect(result.current.orgId).toBe('new-org');
+    expect(setSearchParams).toHaveBeenCalledWith(new URLSearchParams('org=new-org'));
+  });
+});

client/app/mocks/index.ts

@@ -1,4 +1,2 @@
-import { renderWithProviders } from '~/mocks/render';
-
-export { renderWithProviders };
+export { renderWithProviders, renderHookWithProviders } from '~/mocks/render';
 export * from '@testing-library/react';

client/app/mocks/render.tsx

@@ -1,4 +1,4 @@
-import { render, RenderOptions } from '@testing-library/react';
+import { render, renderHook, RenderHookResult, RenderOptions } from '@testing-library/react';
 import React, { PropsWithChildren, ReactElement } from 'react';
 import { FormProvider, useForm, UseFormProps } from 'react-hook-form';
 import { Provider } from 'react-redux';
@@ -50,3 +50,25 @@ export function renderWithProviders(
 
   return { store, ...render(ui, { wrapper: Wrapper, ...renderOptions }) };
 }
+
+export function renderHookWithProviders<T>(
+  hook: () => T,
+  {
+    preloadedState = {},
+    store = setupStore(preloadedState),
+    useFormProps = {},
+  }: ExtendedRenderOptions = {}
+): RenderHookResult<T, unknown> {
+  function Wrapper({ children }: PropsWithChildren<NonNullable<unknown>>): ReactElement {
+    const formMethods = useForm(useFormProps);
+    return (
+      <Provider store={store}>
+        <MemoryRouter>
+          <FormProvider {...formMethods}>{children}</FormProvider>
+        </MemoryRouter>
+      </Provider>
+    );
+  }
+
+  return { ...renderHook(hook, { wrapper: Wrapper }) };
+}