chore(testing-lib): RTL overrides re-organization

.changeset/rtl-overrides.md

@@ -2,5 +2,6 @@
 '@leafygreen-ui/testing-lib': minor
 ---
 
-Exports types `RenderHookOptions` & `RenderHookResult`.
-Updates type signature of `renderHook`
+- Exports types `RenderHookOptions` & `RenderHookResult`.
+- Updates type signature of `renderHook`
+- Updates internal structure of RTL override files

packages/testing-lib/rollup.config.mjs

@@ -3,10 +3,11 @@ import { esmConfig, umdConfig } from '@lg-tools/build/config/rollup.config.mjs';
 export default [
   esmConfig,
   umdConfig,
-  ...['./src/renderHookServer.tsx', './src/renderHookServerV17.tsx'].map(
-    input => ({
-      ...umdConfig,
-      input,
-    }),
-  ),
+  ...[
+    './src/ReactTestingLibrary/renderHookServer/renderHookServer18.tsx',
+    './src/ReactTestingLibrary/renderHookServer/renderHookServer17.tsx',
+  ].map(input => ({
+    ...umdConfig,
+    input,
+  })),
 ];

packages/testing-lib/src/ReactTestingLibrary/act.ts

@@ -0,0 +1,21 @@
+import { isReact17 } from './utils/isReact17';
+
+/**
+ * Type of `act` from `@testing-library/react` if it exists,
+ * otherwise defaults to compatible type.
+ */
+export type ActType = (cb: () => void | Promise<void>) => void | Promise<void>;
+
+/**
+ * Re-exports `act` from `"@testing-library/react"` in React18+
+ * or from `"@testing-library/react-hooks"` in React17 environments
+ */
+export const act: ActType = (() => {
+  if (isReact17()) {
+    const RHTL = require('@testing-library/react-hooks');
+    return RHTL.act;
+  } else {
+    const RTL = require('@testing-library/react');
+    return RTL.act;
+  }
+})();

packages/testing-lib/src/ReactTestingLibrary/index.ts

@@ -0,0 +1,11 @@
+export { act, type ActType } from './act';
+export {
+  renderHook,
+  type RenderHookOptions,
+  type RenderHookResult,
+} from './renderHook';
+export {
+  renderHookServer,
+  type RenderHookServerOptions,
+  type RenderHookServerResult,
+} from './renderHookServer';

packages/testing-lib/src/ReactTestingLibrary/renderHook.ts

@@ -0,0 +1,50 @@
+import * as RTL from '@testing-library/react';
+
+import { Exists } from './utils/types';
+
+/**
+ * Returns the type of `RenderHookOptions` from `@testing-library/react` if it exists,
+ * otherwise defaults to a compatible type.
+ */
+export type RenderHookOptions<TProps> = Exists<
+  typeof RTL,
+  'RenderHookOptions',
+  RTL.RenderOptions & {
+    initialProps?: TProps;
+  }
+>;
+
+/**
+ * Returns the type of `RenderHookResult` from `@testing-library/react` if it exists,
+ * otherwise defaults to a compatible type.
+ */
+export type RenderHookResult<TResult, TProps> = Exists<
+  typeof RTL,
+  'RenderHookResult',
+  {
+    current: TResult;
+    rerender: (props?: TProps) => void;
+    unmount: () => void;
+    result: {
+      all: Array<TResult>;
+      current: TResult;
+      error: Error;
+    };
+  }
+>;
+
+/**
+ * Re-exports `renderHook` from `"@testing-library/react"` if it exists,
+ * or from `"@testing-library/react-hooks"`
+ *
+ * (used when running in a React 17 test environment)
+ */
+export const renderHook: <TResult = any, TProps = any>(
+  render: (initialProps: TProps) => TResult,
+  options?: RenderHookOptions<TProps>,
+) => RenderHookResult<TResult, TProps> =
+  (RTL as any).renderHook ??
+  (() => {
+    const RHTL = require('@testing-library/react-hooks');
+    return RHTL.renderHook;
+  })();

packages/testing-lib/src/ReactTestingLibrary/renderHookServer/index.ts

@@ -0,0 +1,22 @@
+import path from 'path';
+
+import { isReact17 } from '../utils/isReact17';
+
+import type {
+  RenderHookServerOptions,
+  RenderHookServerResult,
+} from './renderHookServer.types';
+
+export type { RenderHookServerOptions, RenderHookServerResult };
+
+/**
+ * Correct `renderHookServer` method based on React version.
+ */
+export const renderHookServer: <Hook extends () => any>(
+  useHook: Hook,
+  options?: RenderHookServerOptions,
+) => RenderHookServerResult<Hook> = (() => {
+  const filename = isReact17() ? 'renderHookServer17' : 'renderHookServer18';
+  const RHS = require(path.resolve(__dirname, filename));
+  return RHS.renderHookServer;
+})();

packages/testing-lib/src/ReactTestingLibrary/renderHookServer/renderHookServer.types.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+
+export interface RenderHookServerOptions {
+  wrapper?: ({ children }: { children: ReactNode }) => JSX.Element;
+}
+
+export interface RenderHookServerResult<Hook extends () => any> {
+  result: { current: ReturnType<Hook> };
+  hydrate: () => void;
+}

packages/testing-lib/src/ReactTestingLibrary/renderHookServer/renderHookServer17.tsx

@@ -0,0 +1,32 @@
+import { renderHook } from '@testing-library/react-hooks/server';
+
+import type {
+  RenderHookServerOptions,
+  RenderHookServerResult,
+} from './renderHookServer.types';
+
+/**
+ * Allows you to mock the server side rendering of a hook in pre React 18 versions.
+ * For versions >=18, use `@testing-lib/renderHookServer`.
+ *
+ * e.g.
+ * ```typescript
+ *   it('should return true when server-side rendered and false after hydration', () => {
+ *     const { result, hydrate } = renderHookServer(useMyHook);
+ *     expect(result.current).toBe(true);
+ *     hydrate();
+ *     expect(result.current).toBe(false);
+ *   });
+ * ```
+}
+ */
+export function renderHookServer<Hook extends () => any>(
+  useHook: Hook,
+  { wrapper }: RenderHookServerOptions = {},
+): RenderHookServerResult<Hook> {
+  // @ts-ignore Type 'undefined' is not assignable to type 'Window'.
+  jest.spyOn(global, 'window', 'get').mockImplementation(() => undefined);
+  const response = renderHook(useHook, { wrapper });
+  jest.spyOn(global, 'window', 'get').mockRestore();
+  return response;
+}

packages/testing-lib/src/ReactTestingLibrary/renderHookServer/renderHookServer18.tsx

@@ -0,0 +1,89 @@
+import React from 'react';
+// @ts-ignore Cannot find module 'react-dom/client' or its corresponding type declarations
+import { hydrateRoot } from 'react-dom/client';
+import { renderToString } from 'react-dom/server';
+import { act } from 'react-dom/test-utils';
+
+import type {
+  RenderHookServerOptions,
+  RenderHookServerResult,
+} from './renderHookServer.types';
+
+/**
+ * Allows you to mock the server side rendering of a hook.
+ *
+ * @testing-library/react-hooks/server exposed a `renderHook` method
+ * that allowed for one to render hooks as if SSR, and control
+ * hydration. This is no longer supported in versions >=18.
+ *
+ * This code was extracted from @testing-library/react-hooks/server and
+ * updated to be compatible with React version >= 18 using `hydrateRoot`.
+ *
+ * More context found here:
+ * https://github.com/testing-library/react-testing-library/issues/1120
+ *
+ * e.g.
+ * ```typescript
+ *   it('should return true when server-side rendered and false after hydration', () => {
+ *     const { result, hydrate } = renderHookServer(useMyHook);
+ *     expect(result.current).toBe(true);
+ *     hydrate();
+ *     expect(result.current).toBe(false);
+ *   });
+ * ```
+}
+ */
+export function renderHookServer18<Hook extends () => any>(
+  useHook: Hook,
+  { wrapper: Wrapper }: RenderHookServerOptions = {},
+): RenderHookServerResult<Hook> {
+  // Store hook return value
+  const results: Array<ReturnType<Hook>> = [];
+  const result = {
+    get current() {
+      return results.slice(-1)[0];
+    },
+  };
+
+  // Test component to render hook in
+  const Component = ({ useHook }: { useHook: Hook }) => {
+    results.push(useHook());
+    return null;
+  };
+
+  // Add wrapper if necessary
+  const component = Wrapper ? (
+    <Wrapper>
+      <Component useHook={useHook} />
+    </Wrapper>
+  ) : (
+    <Component useHook={useHook} />
+  );
+
+  // Running tests in an environment that simulates a browser (like Jest with jsdom),
+  // the window object will still be available even when server rendered. To ensure
+  // that window is not available during SSR we need to explicitly mock or remove the
+  // window object.
+  // @ts-ignore Type 'undefined' is not assignable to type 'Window'.
+  jest.spyOn(global, 'window', 'get').mockImplementation(() => undefined);
+
+  // Render hook on server
+  const serverOutput = renderToString(component);
+
+  // Restore window
+  jest.spyOn(global, 'window', 'get').mockRestore();
+
+  // Render hook on client
+  const hydrate = () => {
+    const root = document.createElement('div');
+    root.innerHTML = serverOutput;
+    act(() => {
+      hydrateRoot(root, component);
+    });
+  };
+
+  return {
+    result,
+    hydrate,
+  };
+}

packages/testing-lib/src/ReactTestingLibrary/utils/getReactVersion.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+
+export const getReactVersion = () => {
+  return parseInt(React.version.split('.')[0], 10);
+};

packages/testing-lib/src/ReactTestingLibrary/utils/isReact17.ts

@@ -0,0 +1,5 @@
+import { getReactVersion } from './getReactVersion';
+
+export const isReact17 = () => {
+  return getReactVersion() === 17;
+};

packages/testing-lib/src/ReactTestingLibrary/utils/types.ts

@@ -0,0 +1,11 @@
+/**
+ * Utility type that returns `X.Y` if it exists, otherwise defaults to fallback type `Z`, or `any`
+ *
+ * @internal
+ * Redeclared from /lib to avoid circular dependency issues
+ */
+export type Exists<
+  X,
+  Y extends keyof X | string,
+  Z = unknown,
+> = Y extends keyof X ? X[Y] : Z;

packages/testing-lib/src/index.ts

@@ -3,10 +3,14 @@ import * as jest from './jest';
 import * as JestDOM from './jest-dom';
 export {
   act,
+  type ActType,
   renderHook,
+  type RenderHookOptions,
   type RenderHookResult,
   renderHookServer,
-} from './RTLOverrides';
+  type RenderHookServerOptions,
+  type RenderHookServerResult,
+} from './ReactTestingLibrary';
 export { useTraceUpdate } from './useTraceUpdate';
 export { waitForState } from './waitForState';
 export { waitForTransition } from './waitForTransition';

packages/testing-lib/src/waitForState.ts

@@ -1,4 +1,4 @@
-import { act } from './RTLOverrides';
+import { act } from './ReactTestingLibrary';
 
 /**
  * Wrapper around `act`.
@@ -10,7 +10,7 @@ export const waitForState = async <T extends any>(
   callback: () => T,
 ): Promise<T> => {
   let val: T;
-  await act(() => {
+  await act(async () => {
     val = callback();
   });
 

packages/testing-lib/src/waitForTransition/waitForTransition.ts

@@ -1,6 +1,6 @@
 import { fireEvent, waitFor } from '@testing-library/react';
 
-import { act } from '../RTLOverrides';
+import { act } from '../ReactTestingLibrary';
 
 /**
  * Fires the `transitionEnd` event on the provided element,
@@ -15,7 +15,7 @@ export async function waitForTransition(
 ) {
   if (element) {
     await waitFor(() => {
-      act(() => {
+      act(async () => {
         fireEvent.transitionEnd(element, options);
       });
     });