react-recoil-hooks-testing-library

Simple and complete React hooks testing utilities that encourage good testing practices... with Recoil!

Takes the api of @testing-library/react-hooks and adds a <RecoilRoot/> component as a wrapper and lets you switch up existing state defaults by passing in a new states array to the options object.

Example

// count.ts
export const countState = atom({
  key: 'count',
  default: 0,
});

export const useRecoilCounter = (initialProps: string) => {
  const [count, setCount] = useRecoilState(countState);

  const increment = () => {
    setCount(count => count + 1);
  };

  return { increment, count };
};

// count.test.ts
import { act, renderRecoilHook } from 'react-recoil-hooks-testing-library';
import { countState, useRecoilCounter } from './count';

describe('useRecoilCounter', () => {
  it('returns the default count value', () => {
    const { result } = renderRecoilHook(useRecoilCounter);
    expect(result.current.count).toBe(0);
  });

  it('updates the counter when increment is called', () => {
    const { result } = renderRecoilHook(useRecoilCounter);

    act(() => {
      result.current.increment();
    });

    expect(result.current.count).toBe(1);
  });

  it('returns updated default atom state', () => {
    const { result } = renderRecoilHook(useRecoilCounter, {
      states: [{ recoilState: countState, initialValue: 42 }],
    });

    expect(result.current.count).toBe(42);

    act(() => {
      result.current.increment();
    });

    expect(result.current.count).toBe(43);
  });
});

API

This library exposes all of the same api surfaces as the hooks testing library. The only difference is renderHook is renamed to renderRecoilHook for clarity and a new option, states, has been added. See the offical api docs for a full explanation of the api

renderRecoilHook

function renderRecoilHook(
  callback: function(props?: any): any,
  options?: RenderHookOptions
): RenderHookResult

renderRecoilHook Options

states

states?: { recoilState: RecoilState, initialValue: RecoilValue<any> }[]

An array of state objects that can be used to override the default state of an atom or selector. This can be useful when testing hooks that use derived state from another source and that state value needs to be mocked.

initialProps

The initial values to pass as props to the callback function of renderRecoilHook.

wrapper

A React component to wrap the test component in when rendering. This is usually used to add context providers from React.createContext for the hook to access with useContext. initialProps and props subsequently set by rerender will be provided to the wrapper.

Note: <RecoilRoot /> is the top level component, and anything passed to wrapper will be a child of it.