React 17 renderHook (#2161)

TheSonOfThomp · web-flow · commit 7f38e78ab0d5 · 2024-01-11T14:30:00.000-05:00
* adds renderHook override to testing-lib * update renderHook imports in basic packages * update usage in toast * export `act` from @lg-tl * update usage in `hooks` * Updates return value of `useToast.updateToast` * remove `act` warnings * update types in RTLOverrides * Creates `waitForState ` * updates hooks & toast tests * adds changesets * updates dependencies * updates externalDependencies * update testing-lib build script * adds comment for @ts-expect-error * moves globToRegex * adds docs to Exists * Update config.ts * Update hooks.spec.tsx * Update hooks.spec.tsx
diff --git a/.changeset/bright-walls-glow.md b/.changeset/bright-walls-glow.md
@@ -0,0 +1,6 @@
+---
+'@lg-tools/validate': patch
+---
+
+- Adds `'@leafygreen-ui/testing-lib'` to list of external dependencies.
+- Updates handling of external dependencies with glob patterns
diff --git a/.changeset/fast-bananas-watch.md b/.changeset/fast-bananas-watch.md
@@ -0,0 +1,5 @@
+---
+'@leafygreen-ui/toast': patch
+---
+
+Updates `updateToast` function to consistently return the new toast object
diff --git a/.changeset/healthy-needles-learn.md b/.changeset/healthy-needles-learn.md
@@ -0,0 +1,8 @@
+---
+'@leafygreen-ui/leafygreen-provider': patch
+'@leafygreen-ui/hooks': patch
+'@leafygreen-ui/toast': patch
+'@leafygreen-ui/a11y': patch
+---
+
+Updates test to import `renderHook` from `@leafygreen-ui/testing-lib`
diff --git a/.changeset/khaki-lies-carry.md b/.changeset/khaki-lies-carry.md
@@ -0,0 +1,5 @@
+---
+'@leafygreen-ui/testing-lib': minor
+---
+
+Exports `waitForState`, a wrapper around `act` that returns the result of the state update callback
diff --git a/.changeset/strange-scissors-prove.md b/.changeset/strange-scissors-prove.md
@@ -0,0 +1,5 @@
+---
+'@leafygreen-ui/testing-lib': minor
+---
+
+Exports overrides for `renderHook` and `act` that will work in both a React 17 and React 18 test environment
diff --git a/packages/a11y/src/A11y.spec.tsx b/packages/a11y/src/A11y.spec.tsx
@@ -1,8 +1,9 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import { renderHook } from '@testing-library/react-hooks';
 import { axe } from 'jest-axe';
 
+import { renderHook } from '@leafygreen-ui/testing-lib';
+
 import { AriaLabelProps, AriaLabelPropsWithLabel } from './AriaLabelProps';
 import {
   prefersReducedMotion,
diff --git a/packages/hooks/src/hooks.spec.tsx b/packages/hooks/src/hooks.spec.tsx
@@ -1,4 +1,6 @@
-import { act, renderHook } from '@testing-library/react-hooks';
+import { waitFor } from '@testing-library/react';
+
+import { act, renderHook } from '@leafygreen-ui/testing-lib';
 
 import {
   useEventListener,
@@ -94,7 +96,7 @@ describe('packages/hooks', () => {
   describe.skip('useMutationObserver', () => {}); //eslint-disable-line jest/no-disabled-tests
 
   test('useViewportSize responds to updates in window size', async () => {
-    const { result, waitForNextUpdate } = renderHook(() => useViewportSize());
+    const { result, rerender } = renderHook(() => useViewportSize());
 
     const mutableWindow: { -readonly [K in keyof Window]: Window[K] } = window;
     const initialHeight = 360;
@@ -104,10 +106,11 @@ describe('packages/hooks', () => {
     mutableWindow.innerWidth = initialWidth;
 
     window.dispatchEvent(new Event('resize'));
-    await act(waitForNextUpdate);
-
-    expect(result?.current?.height).toBe(initialHeight);
-    expect(result?.current?.width).toBe(initialWidth);
+    rerender();
+    await waitFor(() => {
+      expect(result?.current?.height).toBe(initialHeight);
+      expect(result?.current?.width).toBe(initialWidth);
+    });
 
     const updateHeight = 768;
     const updateWidth = 1024;
@@ -116,10 +119,10 @@ describe('packages/hooks', () => {
     mutableWindow.innerWidth = updateWidth;
 
     window.dispatchEvent(new Event('resize'));
-    await act(waitForNextUpdate);
-
-    expect(result?.current?.height).toBe(updateHeight);
-    expect(result?.current?.width).toBe(updateWidth);
+    await waitFor(() => {
+      expect(result?.current?.height).toBe(updateHeight);
+      expect(result?.current?.width).toBe(updateWidth);
+    });
   });
 
   describe('usePoller', () => {
@@ -249,26 +252,29 @@ describe('packages/hooks', () => {
       expect(pollHandler).toHaveBeenCalledTimes(0);
     });
 
-    test('when document is not visible', () => {
+    test('when document is not visible', async () => {
       const pollHandler = jest.fn();
 
-      renderHook(() => usePoller(pollHandler));
+      const { rerender } = renderHook(() => usePoller(pollHandler));
 
       expect(pollHandler).toHaveBeenCalledTimes(1);
 
       mutableDocument.visibilityState = 'hidden';
       act(() => {
         document.dispatchEvent(new Event('visibilitychange'));
       });
-
       jest.advanceTimersByTime(30e3);
 
       expect(pollHandler).toHaveBeenCalledTimes(1);
 
       mutableDocument.visibilityState = 'visible';
+
       act(() => {
         document.dispatchEvent(new Event('visibilitychange'));
       });
+      jest.advanceTimersByTime(30e3);
+
+      rerender(pollHandler);
 
       // immediate triggers the pollHandler
       expect(pollHandler).toHaveBeenCalledTimes(2);
@@ -308,11 +314,11 @@ describe('packages/hooks', () => {
       rerender(2020);
       expect(result.current).toEqual(42);
 
-      rerender();
+      rerender(123);
       expect(result.current).toEqual(2020);
 
       rerender();
-      expect(result.current).toEqual(2020);
+      expect(result.current).toEqual(123);
     });
   });
 
diff --git a/packages/hooks/src/useControlledValue/useControlledValue.spec.ts b/packages/hooks/src/useControlledValue/useControlledValue.spec.ts
@@ -1,6 +1,7 @@
 import { ChangeEvent } from 'react';
 import { act } from 'react-test-renderer';
-import { renderHook } from '@testing-library/react-hooks';
+
+import { renderHook } from '@leafygreen-ui/testing-lib';
 
 import { useControlledValue } from './useControlledValue';
 
diff --git a/packages/hooks/src/useDynamicRefs/useDynamicRefs.spec.tsx b/packages/hooks/src/useDynamicRefs/useDynamicRefs.spec.tsx
@@ -1,6 +1,6 @@
-import { renderHook } from '@testing-library/react-hooks';
-
+// import { renderHook } from '@testing-library/react-hooks';
 import { consoleOnce } from '@leafygreen-ui/lib';
+import { renderHook } from '@leafygreen-ui/testing-lib';
 
 import { DynamicRefGetter, useDynamicRefs } from '.';
 
@@ -11,11 +11,13 @@ describe('packages/hooks/useDynamicRefs', () => {
   });
 
   test('returns identical getter when rerendered ', () => {
+    const props = { prefix: 'A' };
     const { result, rerender } = renderHook(v => useDynamicRefs(v), {
-      initialProps: { prefix: 'A' },
+      initialProps: props,
     });
-    rerender();
-    expect(result.all[0]).toBe(result.all[1]);
+    const initialValue = result.current;
+    rerender(props);
+    expect(result.current).toStrictEqual(initialValue);
   });
 
   test('returns unique getters when called with the same prefix', () => {
@@ -33,11 +35,14 @@ describe('packages/hooks/useDynamicRefs', () => {
 
   test('returns unique getters when re-rendered with a different prefix', () => {
     // This is an edge-case, but this is the behavior we want if it happens
+    const props = { prefix: 'A' };
     const { result, rerender } = renderHook(v => useDynamicRefs(v), {
-      initialProps: { prefix: 'A' },
+      initialProps: props,
     });
-    rerender({ prefix: 'B' });
-    expect(result.all[0]).not.toBe(result.all[1]);
+    const initialValue = result.current;
+    const newProps = { prefix: 'B' };
+    rerender(newProps);
+    expect(result.current).not.toBe(initialValue);
   });
 
   describe('ref getter function', () => {
@@ -66,18 +71,20 @@ describe('packages/hooks/useDynamicRefs', () => {
     });
 
     test('returns identical refs when called with the same key', () => {
-      const { result } = renderHook(() => useDynamicRefs({ prefix: 'A' }));
+      const props = { prefix: 'A' };
+      const { result } = renderHook(() => useDynamicRefs(props));
       const ref1 = result.current('key');
       const ref2 = result.current('key');
       expect(ref1).toBe(ref2);
     });
 
     test('returns identical refs when rerendered', () => {
+      const props = { prefix: 'A' };
       const { result, rerender } = renderHook(v => useDynamicRefs(v), {
-        initialProps: { prefix: 'A' },
+        initialProps: props,
       });
       const ref1 = result.current('key');
-      rerender();
+      rerender(props);
       const ref2 = result.current('key');
       expect(ref1).toBe(ref2);
     });
diff --git a/packages/leafygreen-provider/src/PopoverContext/PopoverContext.spec.tsx b/packages/leafygreen-provider/src/PopoverContext/PopoverContext.spec.tsx
@@ -1,6 +1,7 @@
 import React, { PropsWithChildren } from 'react';
 import { act, fireEvent, render, waitFor } from '@testing-library/react';
-import { renderHook } from '@testing-library/react-hooks';
+
+import { renderHook } from '@leafygreen-ui/testing-lib';
 
 import { PopoverProvider, type PopoverState, usePopoverContext } from '.';
 
diff --git a/packages/testing-lib/package.json b/packages/testing-lib/package.json
@@ -12,10 +12,18 @@
       ]
     }
   },
+  "devDependencies": {
+    "@lg-tools/build": "0.3.1"
+  },
+  "peerDependencies": {
+    "@testing-library/react": "^12.0.0 || ^13.1.0 || ^14.0.0"
+  },
+  "optionalDependencies": {
+    "@testing-library/react-hooks": ">=3.7.0"
+  },
   "scripts": {
-    "build": "lg build-package",
-    "tsc": "lg build-ts",
-    "docs": "lg build-tsdoc"
+    "build": "lg-internal-build-package",
+    "tsc": "tsc --build tsconfig.json"
   },
   "license": "Apache-2.0",
   "publishConfig": {
@@ -28,6 +36,5 @@
   },
   "bugs": {
     "url": "https://jira.mongodb.org/projects/PD/summary"
-  },
-  "devDependencies": {}
+  }
 }
diff --git a/packages/testing-lib/src/RTLOverrides.ts b/packages/testing-lib/src/RTLOverrides.ts
@@ -0,0 +1,36 @@
+import * as RTL from '@testing-library/react';
+
+/**
+ * Utility type that returns `X.Y` if it exists, otherwise defaults to fallback type `Z`, or `any`
+ */
+export type Exists<
+  X,
+  Y extends keyof X | string,
+  Z = unknown,
+> = Y extends keyof X ? X[Y] : Z;
+
+/**
+ * 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: Exists<typeof RTL, 'renderHook'> =
+  (RTL as any).renderHook ??
+  (() => {
+    const RHTL = require('@testing-library/react-hooks');
+    return RHTL.renderHook;
+  })();
+
+/**
+ * Re-exports `act` from `"@testing-library/react"` if it exists,
+ * or from `"@testing-library/react-hooks"`
+ *
+ * (used when running in a React 17 test environment)
+ */
+export const act: Exists<typeof RTL, 'act'> =
+  RTL.act ??
+  (() => {
+    const RHTL = require('@testing-library/react-hooks');
+    return RHTL.act;
+  })();
diff --git a/packages/testing-lib/src/index.ts b/packages/testing-lib/src/index.ts
@@ -1,5 +1,7 @@
 import * as Context from './context';
 import * as jest from './jest';
 import * as JestDOM from './jest-dom';
+export { act, renderHook } from './RTLOverrides';
+export { waitForState } from './waitForState';
 
 export { Context, jest, JestDOM };
diff --git a/packages/testing-lib/src/waitForState.ts b/packages/testing-lib/src/waitForState.ts
@@ -0,0 +1,19 @@
+import { act } from './RTLOverrides';
+
+/**
+ * Wrapper around `act`.
+ *
+ * Awaits an `act` call,
+ * and returns the value of the state update callback
+ */
+export const waitForState = async <T extends any>(
+  callback: () => T,
+): Promise<T> => {
+  let val: T;
+  await act(() => {
+    val = callback();
+  });
+
+  // @ts-expect-error - val is returned before TS sees it as being defined
+  return val;
+};
diff --git a/packages/testing-lib/tsconfig.json b/packages/testing-lib/tsconfig.json
@@ -6,7 +6,6 @@
     "rootDir": "src",
     "baseUrl": ".",
     "paths": {
-      "@leafygreen-ui/icon/dist/*": ["../icon/src/generated/*"],
       "@leafygreen-ui/*": ["../*/src"]
     }
   },
diff --git a/packages/toast/src/ToastContext/ToastReducer/useToastReducer.spec.ts b/packages/toast/src/ToastContext/ToastReducer/useToastReducer.spec.ts
@@ -1,6 +1,7 @@
 import { act } from 'react-dom/test-utils';
 import { cleanup } from '@testing-library/react';
-import { renderHook } from '@testing-library/react-hooks';
+
+import { renderHook } from '@leafygreen-ui/testing-lib';
 
 import { Variant } from '../../Toast.types';
 import { ToastId, ToastStack } from '../ToastContext.types';
diff --git a/packages/toast/src/ToastContext/ToastReducer/useToastReducer.ts b/packages/toast/src/ToastContext/ToastReducer/useToastReducer.ts
@@ -113,16 +113,25 @@ export const useToastReducer = (initialValue?: ToastStack) => {
 
   const updateToast: ToastContextProps['updateToast'] = useCallback(
     (id: ToastId, props: Partial<ToastProps>) => {
-      dispatch({
+      const action: ToastReducerAction = {
         type: ToastReducerActionType.Update,
         payload: {
           id,
           props,
         },
-      });
-      return getToast(id);
+      };
+
+      dispatch(action);
+
+      // `getToast` will return the previous toast value,
+      // so we need to apply the state change manually
+      // in order to return the updated value
+      const { stack: newStack } = toastReducer({ stack }, action);
+      const updatedToast = newStack.get(id);
+
+      return updatedToast;
     },
-    [getToast],
+    [stack],
   );
 
   const clearStack: ToastContextProps['clearStack'] = useCallback(() => {
diff --git a/packages/toast/src/ToastContext/useToast/useToast.spec.tsx b/packages/toast/src/ToastContext/useToast/useToast.spec.tsx
diff --git a/tools/test/package.json b/tools/test/package.json
diff --git a/tools/validate/src/dependencies/config.ts b/tools/validate/src/dependencies/config.ts
diff --git a/tools/validate/src/dependencies/utils/globToRegex.ts b/tools/validate/src/dependencies/utils/globToRegex.ts
diff --git a/tools/validate/src/dependencies/utils/index.ts b/tools/validate/src/dependencies/utils/index.ts
diff --git a/tools/validate/src/dependencies/validateListedDependencies.ts b/tools/validate/src/dependencies/validateListedDependencies.ts
diff --git a/yarn.lock b/yarn.lock

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'@leafygreen-ui/toast': patch
 +---
++
 +Updates `updateToast` function to consistently return the new toast object