import { ResponsiveProvider, useIsMobile } from '../src'; import { breakpoints, breakpointsMax } from './__fixtures__/mockBreakpoints'; import { cleanup, render } from '@testing-library/react'; import { mockMatchMedia, unmockMatchMedia, } from './__fixtures__/mockMatchMedia'; import React from 'react'; const props = { breakpoints, breakpointsMax }; const MockComponent = ({ children }) => { const responsive = useIsMobile(); return children(responsive); }; const mockRenderProp = jest.fn(() => null); describe('useIsMobile()', () => { beforeEach(() => { jest.clearAllMocks(); mockMatchMedia(); }); afterEach(() => { cleanup(); unmockMatchMedia(); }); test('should return not isMobile when window size md and mobile breakpoint md', () => { const windowSizeMd = 960; window.resizeTo(windowSizeMd, 768); render( <ResponsiveProvider {...props} mobileBreakpoint="md"> <MockComponent>{mockRenderProp}</MockComponent> </ResponsiveProvider> ); expect(mockRenderProp).toHaveBeenCalledTimes(2); expect(mockRenderProp).toHaveBeenLastCalledWith({ isMobile: false, isCalculated: true, }); }); test('should return isMobile when window size sm and mobile breakpoint md', () => { const windowSizeSm = 576; window.resizeTo(windowSizeSm, 768); render( <ResponsiveProvider {...props} mobileBreakpoint="md"> <MockComponent>{mockRenderProp}</MockComponent> </ResponsiveProvider> ); expect(mockRenderProp).toHaveBeenCalledTimes(2); expect(mockRenderProp).toHaveBeenLastCalledWith({ isMobile: true, isCalculated: true, }); }); test('should return not isMobile when window size sm and mobile breakpoint sm', () => { const windowSizeSm = 576; window.resizeTo(windowSizeSm, 768); render( <ResponsiveProvider {...props} mobileBreakpoint="sm"> <MockComponent>{mockRenderProp}</MockComponent> </ResponsiveProvider> ); expect(mockRenderProp).toHaveBeenCalledTimes(2); expect(mockRenderProp).toHaveBeenLastCalledWith({ isMobile: false, isCalculated: true, }); }); test('should return isMobile when window size sm and mobile breakpoint sm', () => { const windowSizeXs = 320; window.resizeTo(windowSizeXs, 768); render( <ResponsiveProvider {...props} mobileBreakpoint="sm"> <MockComponent>{mockRenderProp}</MockComponent> </ResponsiveProvider> ); expect(mockRenderProp).toHaveBeenCalledTimes(2); expect(mockRenderProp).toHaveBeenLastCalledWith({ isMobile: true, isCalculated: true, }); }); });