Add workaround for @testing-library missing server rendering utils

See testing-library/react-testing-library#1120 (comment)

Author: wojtekmaj

test-utils.tsx

@@ -0,0 +1,60 @@
+import type { ReactNode } from 'react';
+import { hydrateRoot } from 'react-dom/client';
+import { renderToString } from 'react-dom/server';
+import { act } from 'react-dom/test-utils';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const renderHookServer = <Hook extends () => any>(
+  useHook: Hook,
+  {
+    wrapper: Wrapper,
+  }: {
+    wrapper?: ({ children }: { children: ReactNode }) => JSX.Element;
+  } = {},
+): {
+  result: { current: ReturnType<Hook> | undefined };
+  hydrate: () => void;
+} => {
+  // Store hook return values
+  const results: ReturnType<Hook>[] = [];
+
+  const result = {
+    get current() {
+      return results.slice(-1)[0];
+    },
+  };
+
+  const setValue = (value: ReturnType<Hook>) => {
+    results.push(value);
+  };
+
+  const Component = ({ useHook }: { useHook: Hook }) => {
+    setValue(useHook());
+    return null;
+  };
+
+  const component = Wrapper ? (
+    <Wrapper>
+      <Component useHook={useHook} />
+    </Wrapper>
+  ) : (
+    <Component useHook={useHook} />
+  );
+
+  // Render hook on server
+  const serverOutput = renderToString(component);
+
+  // Render hook on client
+  const hydrate = () => {
+    const root = document.createElement('div');
+    root.innerHTML = serverOutput;
+    act(() => {
+      hydrateRoot(root, component);
+    });
+  };
+
+  return {
+    result,
+    hydrate: hydrate,
+  };
+};

tsconfig.json

@@ -3,6 +3,7 @@
     "declaration": true,
     "esModuleInterop": true,
     "isolatedModules": true,
+    "jsx": "react-jsx",
     "module": "nodenext",
     "noEmit": true,
     "noUncheckedIndexedAccess": true,

vitest.config.node.ts

@@ -1,14 +1,9 @@
 import { defineConfig } from 'vitest/config';
 
 export default defineConfig({
-  resolve: {
-    alias: {
-      '@testing-library/react': '@testing-library/react/server',
-    },
-  },
   test: {
     environment: 'node',
-    setupFiles: 'vitest.setup.ts',
+    setupFiles: ['vitest.setup.ts', 'vitest.setup.node.ts'],
     watch: false,
   },
 });

vitest.setup.node.ts

@@ -0,0 +1,11 @@
+import { vi } from 'vitest';
+import { renderHookServer } from './test-utils.js';
+
+vi.mock('@testing-library/react', async () => {
+  const actualTestingLibraryReact = await vi.importActual('@testing-library/react');
+
+  return {
+    ...actualTestingLibraryReact,
+    renderHook: renderHookServer,
+  };
+});