feat: add the ability to test custom hooks

Author: bcarroll22

src/__tests__/helpers.js

@@ -0,0 +1,21 @@
+import { getSetImmediate } from '../helpers';
+
+test('if setImmediate is available, use it', () => {
+  const setImmediateMock = jest.fn();
+  global.setImmediate = setImmediateMock;
+
+  expect(getSetImmediate()).toBe(setImmediateMock);
+});
+
+test('if setImmediate is not available, use setTimeout', () => {
+  const setImmediateMock = {};
+  const setTimeoutMock = jest.fn();
+  global.setImmediate = setImmediateMock;
+  global.setTimeout = setTimeoutMock;
+
+  const setImmediate = getSetImmediate();
+
+  expect(setImmediate).not.toBe(setImmediateMock);
+  setImmediate();
+  expect(setTimeoutMock).toHaveBeenCalledTimes(1);
+});

src/__tests__/hooks/async-hook.js

@@ -0,0 +1,59 @@
+import { useState, useEffect } from 'react';
+
+import { act, renderHook } from '../../';
+
+const getSomeName = () => Promise.resolve('Betty');
+
+const useName = prefix => {
+  const [name, setName] = useState('nobody');
+
+  useEffect(() => {
+    getSomeName().then(theName => {
+      act(() => {
+        setName(prefix ? `${prefix} ${theName}` : theName);
+      });
+    });
+  }, [prefix]);
+
+  return name;
+};
+
+test('should wait for next update', async () => {
+  const { result, waitForNextUpdate } = renderHook(() => useName());
+
+  expect(result.current).toBe('nobody');
+
+  await waitForNextUpdate();
+
+  expect(result.current).toBe('Betty');
+});
+
+test('should wait for multiple updates', async () => {
+  const { result, waitForNextUpdate, rerender } = renderHook(({ prefix }) => useName(prefix), {
+    initialProps: { prefix: 'Mrs.' },
+  });
+
+  expect(result.current).toBe('nobody');
+
+  await waitForNextUpdate();
+
+  expect(result.current).toBe('Mrs. Betty');
+
+  rerender({ prefix: 'Ms.' });
+
+  await waitForNextUpdate();
+
+  expect(result.current).toBe('Ms. Betty');
+});
+
+test('should resolve all when updating', async () => {
+  const { result, waitForNextUpdate } = renderHook(({ prefix }) => useName(prefix), {
+    initialProps: { prefix: 'Mrs.' },
+  });
+
+  expect(result.current).toBe('nobody');
+
+  await Promise.all([waitForNextUpdate(), waitForNextUpdate(), waitForNextUpdate()]);
+
+  expect(result.current).toBe('Mrs. Betty');
+});

src/__tests__/hooks/custom-hook.js

@@ -0,0 +1,42 @@
+import { useState, useCallback } from 'react';
+
+import { renderHook, act } from '../../';
+
+function useCounter(initialCount = 0) {
+  const [count, setCount] = useState(initialCount);
+
+  const incrementBy = useCallback(n => setCount(count + n), [count]);
+  const decrementBy = useCallback(n => setCount(count - n), [count]);
+
+  return { count, incrementBy, decrementBy };
+}
+
+test('should create counter', () => {
+  const { result } = renderHook(() => useCounter());
+
+  expect(result.current.count).toBe(0);
+});
+
+test('should increment counter', () => {
+  const { result } = renderHook(() => useCounter());
+
+  act(() => result.current.incrementBy(1));
+
+  expect(result.current.count).toBe(1);
+
+  act(() => result.current.incrementBy(2));
+
+  expect(result.current.count).toBe(3);
+});
+
+test('should decrement counter', () => {
+  const { result } = renderHook(() => useCounter());
+
+  act(() => result.current.decrementBy(1));
+
+  expect(result.current.count).toBe(-1);
+
+  act(() => result.current.decrementBy(2));
+
+  expect(result.current.count).toBe(-3);
+});

src/__tests__/hooks/error-hook.js

@@ -0,0 +1,105 @@
+import { useState, useEffect } from 'react';
+
+import { act, renderHook } from '../../';
+
+function useError(throwError) {
+  if (throwError) {
+    throw new Error('expected');
+  }
+  return true;
+}
+
+const somePromise = () => Promise.resolve();
+
+function useAsyncError(throwError) {
+  const [value, setValue] = useState();
+  useEffect(() => {
+    somePromise().then(() => {
+      act(() => {
+        setValue(throwError);
+      });
+    });
+  }, [throwError]);
+  return useError(value);
+}
+
+test('should raise error', () => {
+  const { result } = renderHook(() => useError(true));
+
+  expect(() => {
+    expect(result.current).not.toBe(undefined);
+  }).toThrow(Error('expected'));
+});
+
+test('should capture error', () => {
+  const { result } = renderHook(() => useError(true));
+
+  expect(result.error).toEqual(Error('expected'));
+});
+
+test('should not capture error', () => {
+  const { result } = renderHook(() => useError(false));
+
+  expect(result.current).not.toBe(undefined);
+  expect(result.error).toBe(undefined);
+});
+
+test('should reset error', () => {
+  const { result, rerender } = renderHook(throwError => useError(throwError), {
+    initialProps: true,
+  });
+
+  expect(result.error).not.toBe(undefined);
+
+  rerender(false);
+
+  expect(result.current).not.toBe(undefined);
+  expect(result.error).toBe(undefined);
+});
+
+test('should raise async error', async () => {
+  const { result, waitForNextUpdate } = renderHook(() => useAsyncError(true));
+
+  await waitForNextUpdate();
+
+  expect(() => {
+    expect(result.current).not.toBe(undefined);
+  }).toThrow(Error('expected'));
+});
+
+test('should capture async error', async () => {
+  const { result, waitForNextUpdate } = renderHook(() => useAsyncError(true));
+
+  await waitForNextUpdate();
+
+  expect(result.error).toEqual(Error('expected'));
+});
+
+test('should not capture async error', async () => {
+  const { result, waitForNextUpdate } = renderHook(() => useAsyncError(false));
+
+  await waitForNextUpdate();
+
+  expect(result.current).not.toBe(undefined);
+  expect(result.error).toBe(undefined);
+});
+
+test('should reset async error', async () => {
+  const { result, waitForNextUpdate, rerender } = renderHook(
+    throwError => useAsyncError(throwError),
+    {
+      initialProps: true,
+    },
+  );
+
+  await waitForNextUpdate();
+
+  expect(result.error).not.toBe(undefined);
+
+  rerender(false);
+
+  await waitForNextUpdate();
+
+  expect(result.current).not.toBe(undefined);
+  expect(result.error).toBe(undefined);
+});

src/__tests__/hooks/test-hook.js

@@ -0,0 +1,80 @@
+import React, { useState, useEffect } from 'react';
+
+import { act, renderHook } from '../../';
+
+test('renderHook calls the callback', () => {
+  const spy = jest.fn();
+  renderHook(spy);
+  expect(spy).toHaveBeenCalledTimes(1);
+});
+
+test('confirm we can safely call a React Hook from within the callback', () => {
+  renderHook(() => useState());
+});
+
+test('returns a function to unmount component', () => {
+  let isMounted;
+  const { unmount } = renderHook(() => {
+    useEffect(() => {
+      isMounted = true;
+      return () => {
+        isMounted = false;
+      };
+    });
+  });
+  expect(isMounted).toBe(true);
+  unmount();
+  expect(isMounted).toBe(false);
+});
+
+test('returns a function to rerender component', () => {
+  let renderCount = 0;
+  const { rerender } = renderHook(() => {
+    useEffect(() => {
+      renderCount++;
+    });
+  });
+
+  expect(renderCount).toBe(1);
+  rerender();
+  expect(renderCount).toBe(2);
+});
+
+test('accepts wrapper option to wrap rendered hook with', () => {
+  const ctxA = React.createContext();
+  const ctxB = React.createContext();
+  const useHook = () => {
+    return React.useContext(ctxA) * React.useContext(ctxB);
+  };
+  let actual;
+  renderHook(
+    () => {
+      actual = useHook();
+    },
+    {
+      // eslint-disable-next-line react/display-name
+      wrapper: props => (
+        <ctxA.Provider value={3}>
+          <ctxB.Provider value={4} {...props} />
+        </ctxA.Provider>
+      ),
+    },
+  );
+  expect(actual).toBe(12);
+});
+
+test('returns result ref with latest result from hook execution', () => {
+  function useCounter({ initialCount = 0, step = 1 } = {}) {
+    const [count, setCount] = React.useState(initialCount);
+    const increment = () => setCount(c => c + step);
+    const decrement = () => setCount(c => c - step);
+    return { count, increment, decrement };
+  }
+
+  const { result } = renderHook(useCounter);
+  expect(result.current.count).toBe(0);
+  act(() => {
+    result.current.increment();
+  });
+  expect(result.current.count).toBe(1);
+});

src/__tests__/hooks/use-context.js

@@ -0,0 +1,43 @@
+import React, { createContext, useContext } from 'react';
+
+import { renderHook } from '../../';
+
+test('should get default value from context', () => {
+  const TestContext = createContext('foo');
+
+  const { result } = renderHook(() => useContext(TestContext));
+
+  const value = result.current;
+
+  expect(value).toBe('foo');
+});
+
+test('should get value from context provider', () => {
+  const TestContext = createContext('foo');
+
+  const wrapper = ({ children }) => (
+    <TestContext.Provider value="bar">{children}</TestContext.Provider>
+  );
+
+  const { result } = renderHook(() => useContext(TestContext), { wrapper });
+
+  expect(result.current).toBe('bar');
+});
+
+test('should update value in context', () => {
+  const TestContext = createContext('foo');
+
+  const value = { current: 'bar' };
+
+  const wrapper = ({ children }) => (
+    <TestContext.Provider value={value.current}>{children}</TestContext.Provider>
+  );
+
+  const { result, rerender } = renderHook(() => useContext(TestContext), { wrapper });
+
+  value.current = 'baz';
+
+  rerender();
+
+  expect(result.current).toBe('baz');
+});