react-proxy-hook

Helps you test a React Hook

Requirement ⚠️

To use react-proxy-hook, you must use react@16.8.0-alpha.0. React Hooks is currently at RFC stage.

Installation

$ npm i -D react-proxy-hook

Usage

react-proxy-hook is a wrapper around Kent C. Dodd's react-testing-library. It was inspired by the setup function that Kent wrote in his YouTube video. It is presented here as a simple React Hooks function wrapper.

Hooks can not be tested as standalone functions as they will not work unless they are called from withing a rendered component. react-proxy-hook gets around this limitation by proxying an actual component.

Maybe should have been called a HOH (Higher Order Hook)?

You test your Hook just like you would use it in an actual component. Just pass your actual hook to proxyHook and it will return a proxied version of your hook.

Look at how easy testing a Hook can be!

import { proxyHook, cleanup } from 'react-proxy-hook';
import useCounter from '../use-counter';

const useCounterProxy = proxyHook(useCounterProxy);

afterEach(cleanup);

test('useCounter', () => {
  const counterData = useCounterProxy();
  counterData.increment();
  expect(counterData.count).toBe(1);
  counterData.decrement();
  expect(counterData.count).toBe(0);
});

Limitations

Currently, you can only test Hooks that return an object.
You must not deconstruct the returned object in your test.

Live demo

You can see react-proxy-hook used to test a demo counter app in CodeSandbox. This is the same app the Kent talked about on his YouTube video, but the tests were changed to use react-proxy-hook instead.

License

MIT Licensed

Obviously, none of this would not be possible without the tireless work of Kent C. Dodds. Thank you! 🙏

rtorr / react-proxy-hook