Testing a custom react hook that uses another custom hook - reactjs

Question

I'm struggling with a test for a custom react hook.
I have two custom hooks: the first one returns the size of my window:
import { useEffect, useState } from 'react';
export const useWindowSize = () => {
const [windowSize, setWindowSize] = useState({
width: undefined,
height: undefined,
});
useEffect(() => {
const handleResize = () => {
setWindowSize({
width: window.innerWidth,
height: window.innerHeight,
});
};
window.addEventListener('resize', handleResize);
handleResize();
return () => window.removeEventListener('resize', handleResize);
}, []);
return windowSize;
};
The second one returns an object to check whether or not I should expand my sidebar
import { useMemo } from 'react';
import { SIDEBAR_BREAKPOINT, SIDEBAR_WIDTH, SIDEBAR_WIDTH_EXPANDED } from 'config';
import { useWindowSize } from 'hooks';
export const useSidebarWidth = (): { sidebarWidth: string; isExpanded: boolean } => {
const { width } = useWindowSize();
const isExpanded = useMemo(() => {
if (width < SIDEBAR_BREAKPOINT) {
return false;
}
return true;
}, [width]);
return {
sidebarWidth: isExpanded ? SIDEBAR_WIDTH_EXPANDED : SIDEBAR_WIDTH,
isExpanded,
};
};
Now, when trying to test it, I'm stuck between a rock and a hard place:
import { renderHook } from '#testing-library/react-hooks';
import { useSidebarWidth } from 'hooks';
describe('useSidebarWidth', () => {
it('should return 72px as sidebarWidth when width is less than 1440px', () => {
const { result } = renderHook(() => useSidebarWidth());
expect(result.current.sidebarWidth).toBe('72px');
});
it('should return 248px as sidebarWidth when width is more than 1440px', () => {
const { result } = renderHook(() => useSidebarWidth());
expect(result.current.sidebarWidth).toBe('248px');
});
});
In this test, I have two issues: if I run it as is, obviously, the second test will fail (as I didn't change anything regarding my window size). So I figured I'd have to mock the result of my first hook. I added this atop of my test file:
let windowWidth = 700;
jest.mock('hooks', () => ({
useWindowSize: jest.fn(() => ({ width: windowWidth })),
}));
And added this in my second test:
windowWidth = 1500;
But, when using this, it raises the following error:
TypeError: (0 , _hooks.useSidebarWidth) is not a function
How can I get the best of both world and mock my window size to make sure that both test run smoothly ?

Answer 1

hello man i think your problem is with mocking the hooks file which contains both hooks and you only returned useWindowSize.
so instead u should mock useSidebarWidth too :
let windowWidth = 700;
jest.mock('hooks', () => ({
useWindowSize: jest.fn(() => ({ width: windowWidth })),
useSidebarWidth: jest.fn(() => ({sidebarWidth: "72px",isExpanded:true})),
}));
or you can use requireActual if you don't want to mock useSideBar like this :
let windowWidth = 700;
jest.mock('hooks', () => ({
__esModules: true,
...jest.requireActual('hooks')
useWindowSize: jest.fn(() => ({ width: windowWidth })),
}));