Run @rocket.chat/fuselage-hooks tests over React 18 and strict mode

packages/fuselage-hooks/jest.config.js

@@ -3,5 +3,8 @@ module.exports = {
   errorOnDeprecated: true,
   testMatch: ['<rootDir>/src/**/*.spec.{ts,tsx}'],
   testEnvironment: 'jsdom',
-  setupFilesAfterEnv: ['testing-utils/setup/noErrorsLogged'],
+  setupFilesAfterEnv: [
+    'testing-utils/setup/noErrorsLogged',
+    '<rootDir>/src/jest-setup.ts',
+  ],
 };

packages/fuselage-hooks/package.json

@@ -50,11 +50,12 @@
     "@rollup/plugin-json": "~4.1.0",
     "@rollup/plugin-node-resolve": "~13.1.3",
     "@rollup/plugin-typescript": "~8.3.4",
+    "@testing-library/react": "~16.0.1",
     "@testing-library/react-hooks": "~8.0.1",
     "@testing-library/user-event": "~14.5.2",
     "@types/jest": "~29.5.13",
-    "@types/react": "~17.0.83",
-    "@types/react-dom": "~17.0.25",
+    "@types/react": "~18.3.11",
+    "@types/react-dom": "~18.3.0",
     "@types/resize-observer-browser": "~0.1.11",
     "@types/use-sync-external-store": "~0.0.6",
     "bump": "workspace:~",
@@ -63,7 +64,8 @@
     "lint-all": "workspace:~",
     "npm-run-all": "^4.1.5",
     "prettier": "~2.8.7",
-    "react": "^17.0.2",
+    "react": "~18.3.1",
+    "react-dom": "~18.3.1",
     "rimraf": "~5.0.0",
     "rollup": "~2.79.2",
     "rollup-plugin-terser": "~7.0.2",
@@ -74,7 +76,7 @@
   },
   "peerDependencies": {
     "@rocket.chat/fuselage-tokens": "*",
-    "react": "^17.0.2"
+    "react": "*"
   },
   "dependencies": {
     "use-sync-external-store": "~1.2.0"

packages/fuselage-hooks/src/helpers/emptyDeps.ts

@@ -0,0 +1 @@
+export const emptyDeps: ReadonlyArray<unknown> = [];

packages/fuselage-hooks/src/jest-setup.ts

@@ -0,0 +1,3 @@
+import { configure } from '@testing-library/react';
+
+configure({ reactStrictMode: true });

packages/fuselage-hooks/src/useAutoFocus.spec.ts

@@ -1,4 +1,4 @@
-import { renderHook, act } from '@testing-library/react-hooks';
+import { renderHook, act } from '@testing-library/react';
 import { useImperativeHandle, useState } from 'react';
 
 import { useAutoFocus } from './useAutoFocus';
@@ -17,7 +17,7 @@ it('invokes focus', async () => {
 
   act(() => undefined);
 
-  expect(focus).toHaveBeenCalledTimes(1);
+  expect(focus).toHaveBeenCalled();
 });
 
 it('does not invoke focus if isFocused is false', () => {
@@ -28,7 +28,7 @@ it('does not invoke focus if isFocused is false', () => {
 
   act(() => undefined);
 
-  expect(focus).toHaveBeenCalledTimes(0);
+  expect(focus).not.toHaveBeenCalled();
 });
 
 it('invokes focus if isFocused is toggled', () => {
@@ -41,11 +41,11 @@ it('invokes focus if isFocused is toggled', () => {
 
   act(() => undefined);
 
-  expect(focus).toHaveBeenCalledTimes(0);
+  expect(focus).not.toHaveBeenCalled();
 
   act(() => {
     result.current.setIsFocused(true);
   });
 
-  expect(focus).toHaveBeenCalledTimes(1);
+  expect(focus).toHaveBeenCalled();
 });

packages/fuselage-hooks/src/useBorderBoxSize.spec.ts

@@ -1,4 +1,4 @@
-import { renderHook, act } from '@testing-library/react-hooks';
+import { renderHook, act } from '@testing-library/react';
 import type { RefObject } from 'react';
 import { useRef } from 'react';
 import { withResizeObserverMock } from 'testing-utils/mocks/withResizeObserverMock';

packages/fuselage-hooks/src/useBreakpoints.spec.ts

@@ -1,5 +1,5 @@
 import breakpoints from '@rocket.chat/fuselage-tokens/breakpoints.json';
-import { renderHook, act } from '@testing-library/react-hooks';
+import { renderHook, act } from '@testing-library/react';
 import { withMatchMediaMock } from 'testing-utils/mocks/withMatchMediaMock';
 
 import { useBreakpoints } from './useBreakpoints';

packages/fuselage-hooks/src/useClipboard.spec.ts

@@ -1,4 +1,4 @@
-import { renderHook, act } from '@testing-library/react-hooks';
+import { renderHook, act } from '@testing-library/react';
 import { withClipboardMock } from 'testing-utils/mocks/withClipboardMock';
 
 import { useClipboard } from './useClipboard';

packages/fuselage-hooks/src/useContentBoxSize.spec.ts

@@ -1,4 +1,4 @@
-import { renderHook, act } from '@testing-library/react-hooks';
+import { renderHook, act } from '@testing-library/react';
 import type { RefObject } from 'react';
 import { useRef } from 'react';
 import { withResizeObserverMock } from 'testing-utils/mocks/withResizeObserverMock';

packages/fuselage-hooks/src/useDebouncedCallback.spec.ts

@@ -1,4 +1,4 @@
-import { renderHook, act } from '@testing-library/react-hooks';
+import { renderHook, act } from '@testing-library/react';
 import { useState } from 'react';
 
 import { useDebouncedCallback } from './useDebouncedCallback';

packages/fuselage-hooks/src/useDebouncedCallback.ts

@@ -1,6 +1,8 @@
 import type { DependencyList } from 'react';
 import { useMemo, useCallback, useRef, useEffect } from 'react';
 
+import { emptyDeps } from './helpers/emptyDeps';
+
 /**
  * Hook to memoize a debounced version of a callback.
  *
@@ -13,7 +15,7 @@ import { useMemo, useCallback, useRef, useEffect } from 'react';
 export const useDebouncedCallback = <P extends unknown[]>(
   callback: (...args: P) => unknown,
   delay: number,
-  deps?: DependencyList
+  deps: DependencyList = emptyDeps
 ): ((...args: P) => unknown) & {
   flush: () => void;
   cancel: () => void;

packages/fuselage-hooks/src/useDebouncedReducer.spec.ts

@@ -1,4 +1,4 @@
-import { renderHook, act } from '@testing-library/react-hooks';
+import { renderHook, act } from '@testing-library/react';
 
 import { useDebouncedReducer } from './useDebouncedReducer';
 

packages/fuselage-hooks/src/useDebouncedState.spec.ts

@@ -1,4 +1,4 @@
-import { renderHook, act } from '@testing-library/react-hooks';
+import { renderHook, act } from '@testing-library/react';
 
 import { useDebouncedState } from './useDebouncedState';
 

packages/fuselage-hooks/src/useDebouncedUpdates.spec.ts

@@ -1,4 +1,4 @@
-import { renderHook, act } from '@testing-library/react-hooks';
+import { renderHook, act } from '@testing-library/react';
 import { useState } from 'react';
 
 import { useDebouncedUpdates } from './useDebouncedUpdates';

packages/fuselage-hooks/src/useDebouncedValue.spec.ts

@@ -1,4 +1,4 @@
-import { renderHook, act } from '@testing-library/react-hooks';
+import { renderHook, act } from '@testing-library/react';
 import { useReducer } from 'react';
 
 import { useDebouncedValue } from './useDebouncedValue';

packages/fuselage-hooks/src/useEffectEvent.spec.ts

@@ -1,4 +1,4 @@
-import { act, renderHook } from '@testing-library/react-hooks';
+import { act, renderHook } from '@testing-library/react';
 import { useState } from 'react';
 
 import { useEffectEvent } from './useEffectEvent';
@@ -8,9 +8,12 @@ it('returns a stable callback', () => {
 
   const { result, rerender } = renderHook(() => useEffectEvent(fn));
 
+  const stableCallbackA = result.current;
+
   rerender();
 
-  const [stableCallbackA, stableCallbackB] = result.all;
+  const stableCallbackB = result.current;
+
   expect(stableCallbackB).toBe(stableCallbackA);
 });
 

packages/fuselage-hooks/src/useIsomorphicLayoutEffect.spec.ts

@@ -1,4 +1,4 @@
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react';
 
 import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';
 
@@ -11,5 +11,5 @@ it('performs a useLayoutEffect', () => {
     });
   });
 
-  expect(watcher).toBeCalledTimes(1);
+  expect(watcher).toHaveBeenCalled();
 });

packages/fuselage-hooks/src/useLazyRef.spec.ts

@@ -1,4 +1,4 @@
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react';
 
 import { useLazyRef } from './useLazyRef';
 

packages/fuselage-hooks/src/useLocalStorage.spec.ts

@@ -1,4 +1,4 @@
-import { renderHook, act } from '@testing-library/react-hooks';
+import { renderHook, act } from '@testing-library/react';
 
 import { useLocalStorage } from './useStorage';
 

packages/fuselage-hooks/src/useMediaQueries.spec.ts

@@ -1,4 +1,4 @@
-import { renderHook, act } from '@testing-library/react-hooks';
+import { renderHook, act } from '@testing-library/react';
 import { withMatchMediaMock } from 'testing-utils/mocks/withMatchMediaMock';
 
 import { useMediaQueries } from './useMediaQueries';

packages/fuselage-hooks/src/useMediaQueries.ts

@@ -1,4 +1,4 @@
-import { useMemo } from 'react';
+import { useCallback, useMemo, useRef } from 'react';
 import { useSyncExternalStore } from 'use-sync-external-store/shim';
 
 import { useStableArray } from './useStableArray';
@@ -59,10 +59,13 @@ const createStore = (queries: string[]) => {
  */
 export const useMediaQueries = (...queries: string[]): boolean[] => {
   const stableQueries = useStableArray(queries);
+  const serverSnapshotRef = useRef(queries.map(() => false));
   const [subscribe, getSnapshot] = useMemo(
     () => createStore(stableQueries),
     [stableQueries]
   );
 
-  return useSyncExternalStore(subscribe, getSnapshot);
+  const getServerSnapshot = useCallback(() => serverSnapshotRef.current, []);
+
+  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
 };

packages/fuselage-hooks/src/useMediaQuery.spec.ts

@@ -1,4 +1,4 @@
-import { renderHook, act } from '@testing-library/react-hooks';
+import { renderHook, act } from '@testing-library/react';
 import { withMatchMediaMock } from 'testing-utils/mocks/withMatchMediaMock';
 
 import { useMediaQuery } from './useMediaQuery';

packages/fuselage-hooks/src/useMergedRefs.spec.ts

@@ -1,4 +1,4 @@
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react';
 import { createRef } from 'react';
 
 import { useMergedRefs } from './useMergedRefs';

packages/fuselage-hooks/src/useOutsideClick.spec.ts

@@ -1,4 +1,4 @@
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import type { MutableRefObject } from 'react';
 

packages/fuselage-hooks/src/usePrefersColorScheme.spec.ts

@@ -1,4 +1,4 @@
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react';
 import { withMatchMediaMock } from 'testing-utils/mocks/withMatchMediaMock';
 
 import { usePrefersColorScheme } from './usePrefersColorScheme';

packages/fuselage-hooks/src/usePrefersReducedData.spec.ts

@@ -1,4 +1,4 @@
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react';
 import { withMatchMediaMock } from 'testing-utils/mocks/withMatchMediaMock';
 
 import { usePrefersReducedData } from './usePrefersReducedData';

packages/fuselage-hooks/src/usePrefersReducedMotion.spec.ts

@@ -1,4 +1,4 @@
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react';
 import { withMatchMediaMock } from 'testing-utils/mocks/withMatchMediaMock';
 
 import { usePrefersReducedMotion } from './usePrefersReducedMotion';

packages/fuselage-hooks/src/usePrevious.spec.ts

@@ -1,4 +1,4 @@
-import { renderHook, act } from '@testing-library/react-hooks';
+import { renderHook, act } from '@testing-library/react';
 import { useReducer } from 'react';
 
 import { usePrevious } from './usePrevious';

packages/fuselage-hooks/src/useResizeObserver.spec.ts

@@ -1,4 +1,4 @@
-import { renderHook, act } from '@testing-library/react-hooks';
+import { renderHook, act } from '@testing-library/react';
 import { withResizeObserverMock } from 'testing-utils/mocks/withResizeObserverMock';
 
 import { useResizeObserver } from './useResizeObserver';

packages/fuselage-hooks/src/useSafely.spec.ts

@@ -1,5 +1,4 @@
-import { renderHook, act } from '@testing-library/react-hooks';
-import type { Dispatch } from 'react';
+import { renderHook, act } from '@testing-library/react';
 import { useState } from 'react';
 
 import { useSafely } from './useSafely';
@@ -40,11 +39,14 @@ it('returns a new dispatcher that mutates the state', () => {
   );
   const [, newDispatcher] = result.current;
 
+  const [valueA] = result.current;
+
   act(() => {
     newDispatcher(newState);
   });
 
-  const [[valueA], [valueB]] = result.all as [symbol, Dispatch<any>][];
+  const [valueB] = result.current;
+
   expect(valueA).toBe(initialState);
   expect(valueB).toBe(newState);
 });

packages/fuselage-hooks/src/useSafely.ts

@@ -22,17 +22,18 @@ export function useSafely([state, dispatcher]: [
     dispatcher
   );
 
-  useEffect(
-    () => () => {
+  useEffect(() => {
+    dispatcherRef.current = dispatcher;
+
+    return () => {
       dispatcherRef.current = undefined;
-    },
+    };
+  }, [dispatcher]);
+
+  const safeDispatcher = useCallback(
+    (action?: unknown) => (0, dispatcherRef.current)?.(action),
     []
   );
 
-  const safeDispatcher = useCallback((action) => {
-    const dispatcher = dispatcherRef.current;
-    dispatcher?.(action);
-  }, []);
-
   return [state, safeDispatcher];
 }

packages/fuselage-hooks/src/useSessionStorage.spec.ts

@@ -1,4 +1,4 @@
-import { renderHook, act } from '@testing-library/react-hooks';
+import { renderHook, act } from '@testing-library/react';
 
 import { useSessionStorage } from './useStorage';
 

packages/fuselage-hooks/src/useStableArray.spec.ts

@@ -1,4 +1,4 @@
-import { renderHook, act } from '@testing-library/react-hooks';
+import { renderHook, act } from '@testing-library/react';
 import { useState } from 'react';
 
 import { useStableArray } from './useStableArray';

packages/fuselage-hooks/src/useToggle.spec.ts

@@ -1,4 +1,4 @@
-import { renderHook, act } from '@testing-library/react-hooks';
+import { renderHook, act } from '@testing-library/react';
 
 import { useToggle } from './useToggle';
 

packages/fuselage-hooks/src/useUniqueId.spec.ts

@@ -1,4 +1,4 @@
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react';
 
 import { useUniqueId } from './useUniqueId';
 
@@ -18,9 +18,12 @@ it('returns a unique ID', () => {
 
 it('returns the same ID on each render cycle', () => {
   const { result, rerender } = renderHook(() => useUniqueId());
+
+  const uniqueIdA = result.current;
+
   rerender();
 
-  const [uniqueIdA, uniqueIdB] = result.all;
+  const uniqueIdB = result.current;
 
   expect(uniqueIdA).toBe(uniqueIdB);
 });