The Problem

I'm still fairly new to React, and especially to the ways of testing it. So when I faced a hook that received a reactive variable and did different things depending on its state, I was puzzled how to test it as useState cannot be called outside of React context.

Additionally, due to some conditions I can't identify, tests were just hanging if I passed non-reactive variable - it might be a combination of software versions or something else, as I couldn't replicate it in simplified environment.

The Solution

Obvious in retrospect, the useState() could be called inside renderHook! So the solution looked like

it('should return length', async () => { const {result: hookResult, waitForNextUpdate} = renderHook(() => { const [inputData, setInputData] = useState(["one"]); const hookResult = MyHook({inputValue: inputData}); useEffect(() => { setInputData(["one", "two"]); }, []); return hookResult; });

await waitForNextUpdate();

expect(hookResult.current.result).toEqual(2); })

NOTE: waitForNextUpdate is needed only if the component is expected to re-render, it might not be required.