use component hooks

webclient/src/__test-utils__/makeHookWrapper.tsx

@@ -0,0 +1,53 @@
+import { ReactNode } from 'react';
+import { Provider } from 'react-redux';
+import { configureStore, Reducer } from '@reduxjs/toolkit';
+
+import { WebClientContext } from '../hooks/useWebClient';
+import type { WebClient } from '../websocket';
+import { createMockWebClient } from './mockWebClient';
+
+// Minimal Provider wrapper for hook-only tests. Use this instead of
+// `renderWithProviders` when you need `renderHook` — the full provider tree
+// auto-instantiates the singleton store via `@app/store`, which races with
+// any test-local store you preload. Deep-import the reducer(s) you need and
+// pass them here (see useCurrentGame.spec.tsx for the canonical pattern).
+
+export function makeReduxHookWrapper<S>(
+  reducer: Reducer<S>,
+  preloadedState: S,
+) {
+  const store = configureStore({
+    reducer,
+    preloadedState: preloadedState as Parameters<typeof configureStore>[0]['preloadedState'],
+  });
+  function Wrapper({ children }: { children: ReactNode }) {
+    return <Provider store={store}>{children}</Provider>;
+  }
+  return { Wrapper, store };
+}
+
+export interface MakeReduxWebClientHookWrapperOptions<S> {
+  reducer: Reducer<S>;
+  preloadedState: S;
+  webClient?: WebClient;
+}
+
+export function makeReduxWebClientHookWrapper<S>({
+  reducer,
+  preloadedState,
+  webClient,
+}: MakeReduxWebClientHookWrapperOptions<S>) {
+  const store = configureStore({
+    reducer,
+    preloadedState: preloadedState as Parameters<typeof configureStore>[0]['preloadedState'],
+  });
+  const client = webClient ?? createMockWebClient();
+  function Wrapper({ children }: { children: ReactNode }) {
+    return (
+      <Provider store={store}>
+        <WebClientContext value={client}>{children}</WebClientContext>
+      </Provider>
+    );
+  }
+  return { Wrapper, store, webClient: client };
+}