testHook.md

Test Hook

source: https://github.com/kentcdodds/react-testing-library/pull/307/files

testHook.tsx

import React from 'react';
import { render, RenderOptions } from 'react-testing-library';

function TestHook<T>({
  callback,
  children,
}: {
  callback: () => T;
  children: (result: T) => void;
}) {
  children(callback());
  return null;
}
export type HookResult<TResult> = {
  result: React.MutableRefObject<TResult>;
  rerender: () => void;
  unmount: () => boolean;
};

export type HookOptions = RenderOptions;

/**
 * Renders a test component that calls back to the test.
 */
export function testHook<T>(
  callback: () => T,
  options?: Partial<HookOptions>,
): HookResult<T>;
export function testHook<T>(callback: () => T, options = {}): HookResult<T> {
  const result: { current: null | T } = {
    current: null,
  };
  const toRender = () => (
    <TestHook callback={callback}>
      {(res: T) => {
        result.current = res;
      }}
    </TestHook>
  );

  const { unmount, rerender: rerenderComponent } = render(toRender(), options);
  return {
    // @ts-ignore
    result,
    unmount,
    rerender: () => {
      rerenderComponent(toRender());
    },
  };
}