Helps you test a React Hook
To use react-proxy-hook
, you must use react@16.8.0-alpha.0
. React Hooks is currently at
RFC stage.
$ npm i -D react-proxy-hook
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);
});
-
Currently, you can only test Hooks that return an object.
-
You must not deconstruct the returned object in your test.
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.
MIT Licensed
Obviously, none of this would not be possible without the tireless work of Kent C. Dodds. Thank you! 🙏