tests.

Author: mdjastrzebski

src/__tests__/render-hook-sync.test.tsx

@@ -3,7 +3,7 @@ import * as React from 'react';
 
 import { deprecated_renderHookSync } from '../pure';
 
-test('gives committed result', () => {
+test('renders hook and returns committed result', () => {
   const { result } = deprecated_renderHookSync(() => {
     const [state, setState] = React.useState(1);
 
@@ -17,7 +17,45 @@ test('gives committed result', () => {
   expect(result.current).toEqual([2, expect.any(Function)]);
 });
 
-test('allows rerendering', () => {
+test('works with wrapper option', () => {
+  const Context = React.createContext('default');
+  function Wrapper({ children }: { children: ReactNode }) {
+    return <Context.Provider value="provided">{children}</Context.Provider>;
+  }
+  const { result } = deprecated_renderHookSync(
+    () => {
+      return React.useContext(Context);
+    },
+    {
+      wrapper: Wrapper,
+    },
+  );
+
+  expect(result.current).toEqual('provided');
+});
+
+test('works with initialProps option', () => {
+  const { result, rerender } = deprecated_renderHookSync(
+    (props: { branch: 'left' | 'right' }) => {
+      const [left, setLeft] = React.useState('left');
+      const [right, setRight] = React.useState('right');
+
+      switch (props.branch) {
+        case 'left':
+          return [left, setLeft];
+        case 'right':
+          return [right, setRight];
+        default:
+          throw new Error('No Props passed. This is a bug in the implementation');
+      }
+    },
+    { initialProps: { branch: 'left' } },
+  );
+
+  expect(result.current).toEqual(['left', expect.any(Function)]);
+});
+
+test('rerender updates hook with new props', () => {
   const { result, rerender } = deprecated_renderHookSync(
     (props: { branch: 'left' | 'right' }) => {
       const [left, setLeft] = React.useState('left');
@@ -41,21 +79,24 @@ test('allows rerendering', () => {
   expect(result.current).toEqual(['right', expect.any(Function)]);
 });
 
-test('allows wrapper components', () => {
-  const Context = React.createContext('default');
-  function Wrapper({ children }: { children: ReactNode }) {
-    return <Context.Provider value="provided">{children}</Context.Provider>;
+test('unmount triggers cleanup effects', () => {
+  let cleanupCalled = false;
+
+  function useTestHook() {
+    React.useEffect(() => {
+      return () => {
+        cleanupCalled = true;
+      };
+    }, []);
+
+    return 'test';
   }
-  const { result } = deprecated_renderHookSync(
-    () => {
-      return React.useContext(Context);
-    },
-    {
-      wrapper: Wrapper,
-    },
-  );
 
-  expect(result.current).toEqual('provided');
+  const { unmount } = deprecated_renderHookSync(useTestHook);
+  expect(cleanupCalled).toBe(false);
+
+  unmount();
+  expect(cleanupCalled).toBe(true);
 });
 
 function useMyHook<T>(param: T) {

src/__tests__/render-hook.test.tsx

@@ -13,12 +13,10 @@ afterEach(() => {
 });
 
 function useSuspendingHook(promise: Promise<string>) {
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-ignore: React 18 does not have `use` hook
   return React.use(promise);
 }
 
-test('renderHook renders hook asynchronously', async () => {
+test('renders hook and returns committed result', async () => {
   const { result } = await renderHook(() => {
     const [state, setState] = React.useState(1);
 
@@ -32,7 +30,39 @@ test('renderHook renders hook asynchronously', async () => {
   expect(result.current).toEqual(2);
 });
 
-test('renderHook with wrapper option', async () => {
+test('handles hook with state updates during effects', async () => {
+  function useTestHook() {
+    const [count, setCount] = React.useState(0);
+
+    React.useEffect(() => {
+      setCount((prev) => prev + 1);
+    }, []);
+
+    return count;
+  }
+
+  const { result } = await renderHook(useTestHook);
+  expect(result.current).toBe(1);
+});
+
+test('handles multiple state updates in effects', async () => {
+  function useTestHook() {
+    const [first, setFirst] = React.useState(1);
+    const [second, setSecond] = React.useState(2);
+
+    React.useEffect(() => {
+      setFirst(10);
+      setSecond(20);
+    }, []);
+
+    return { first, second };
+  }
+
+  const { result } = await renderHook(useTestHook);
+  expect(result.current).toEqual({ first: 10, second: 20 });
+});
+
+test('works with wrapper option', async () => {
   const Context = React.createContext('default');
 
   function useTestHook() {
@@ -47,7 +77,24 @@ test('renderHook with wrapper option', async () => {
   expect(result.current).toEqual('provided');
 });
 
-test('rerender function updates hook asynchronously', async () => {
+test('works with initialProps option', async () => {
+  function useTestHook(props: { value: number }) {
+    const [state, setState] = React.useState(props.value);
+
+    React.useEffect(() => {
+      setState(props.value * 2);
+    }, [props.value]);
+
+    return state;
+  }
+
+  const { result } = await renderHook(useTestHook, {
+    initialProps: { value: 5 },
+  });
+  expect(result.current).toEqual(10);
+});
+
+test('rerender updates hook with new props', async () => {
   function useTestHook(props: { value: number }) {
     const [state, setState] = React.useState(props.value);
 
@@ -67,7 +114,7 @@ test('rerender function updates hook asynchronously', async () => {
   expect(result.current).toEqual(20);
 });
 
-test('unmount function unmounts hook asynchronously', async () => {
+test('unmount triggers cleanup effects', async () => {
   let cleanupCalled = false;
 
   function useTestHook() {
@@ -87,36 +134,41 @@ test('unmount function unmounts hook asynchronously', async () => {
   expect(cleanupCalled).toBe(true);
 });
 
-test('handles hook with state updates during effects', async () => {
-  function useTestHook() {
-    const [count, setCount] = React.useState(0);
+test('handles hook with cleanup and re-initialization', async () => {
+  let effectCount = 0;
+  let cleanupCount = 0;
+
+  function useTestHook(props: { key: string }) {
+    const [value, setValue] = React.useState(props.key);
 
     React.useEffect(() => {
-      setCount((prev) => prev + 1);
-    }, []);
+      effectCount++;
+      setValue(`${props.key}-effect`);
 
-    return count;
-  }
+      return () => {
+        cleanupCount++;
+      };
+    }, [props.key]);
 
-  const { result } = await renderHook(useTestHook);
-  expect(result.current).toBe(1);
-});
+    return value;
+  }
 
-test('handles multiple state updates in effects', async () => {
-  function useTestHook() {
-    const [first, setFirst] = React.useState(1);
-    const [second, setSecond] = React.useState(2);
+  const { result, rerender, unmount } = await renderHook(useTestHook, {
+    initialProps: { key: 'initial' },
+  });
 
-    React.useEffect(() => {
-      setFirst(10);
-      setSecond(20);
-    }, []);
+  expect(result.current).toBe('initial-effect');
+  expect(effectCount).toBe(1);
+  expect(cleanupCount).toBe(0);
 
-    return { first, second };
-  }
+  await rerender({ key: 'updated' });
+  expect(result.current).toBe('updated-effect');
+  expect(effectCount).toBe(2);
+  expect(cleanupCount).toBe(1);
 
-  const { result } = await renderHook(useTestHook);
-  expect(result.current).toEqual({ first: 10, second: 20 });
+  await unmount();
+  expect(effectCount).toBe(2);
+  expect(cleanupCount).toBe(2);
 });
 
 test('handles hook with suspense', async () => {
@@ -227,40 +279,3 @@ test('handles custom hooks with complex logic', async () => {
   });
   expect(result.current.count).toBe(4);
 });
-
-test('handles hook with cleanup and re-initialization', async () => {
-  let effectCount = 0;
-  let cleanupCount = 0;
-
-  function useTestHook(props: { key: string }) {
-    const [value, setValue] = React.useState(props.key);
-
-    React.useEffect(() => {
-      effectCount++;
-      setValue(`${props.key}-effect`);
-
-      return () => {
-        cleanupCount++;
-      };
-    }, [props.key]);
-
-    return value;
-  }
-
-  const { result, rerender, unmount } = await renderHook(useTestHook, {
-    initialProps: { key: 'initial' },
-  });
-
-  expect(result.current).toBe('initial-effect');
-  expect(effectCount).toBe(1);
-  expect(cleanupCount).toBe(0);
-
-  await rerender({ key: 'updated' });
-  expect(result.current).toBe('updated-effect');
-  expect(effectCount).toBe(2);
-  expect(cleanupCount).toBe(1);
-
-  await unmount();
-  expect(effectCount).toBe(2);
-  expect(cleanupCount).toBe(2);
-});