Mock react hook and keep existing module

Viewed 131

I am using Chakra UI and I have to mock just one hook, because I want to simulate various viewports.

My component is using the hook as following:

export const AuthenticationBase = (props: props) => {
    const [isMobile] = useMediaQuery(['(max-width: 768px)']);

    return (
        <Box textAlign="center" fontSize={isMobile ? 'sm' : 'xl'}>

        </Box>
    );
}

I tried as following:

// runs before any tests start running
jest.mock("@chakra-ui/react", () => {
    // --> Original module
    const originalModule = jest.requireActual("@chakra-ui/react");
  
    return {
      __esModule: true,
      ...originalModule,
      useMediaQuery: jest.fn().mockImplementation(() => [true]),
    };
  });

And then I execute my test:

describe('Authentication Component', () => {
    it('should load with Login', () => {
        const container = mount(<ChakraProvider theme={theme}><AuthenticationBase screen="login" /></ChakraProvider>);
        const title = container.find('h1');
        expect(title).toBeTruthy();
        expect(title.text()).toBe('Login');
        container.unmount();
    });
}

But I get an error from JEST, somehow the hook is not mock correctly:

enter image description here

0 Answers
Related