dyakovk / jest-matchmedia-mock Goto Github PK

import { renderHook } from '@testing-library/react-hooks';
import matchMedia from '@/common/testUtils';
import { useMatchMedia } from './../useMatchMedia';

describe('useMatchMedia', () => {
    it('returns boolean', () => {
        const { result } = renderHook(() => useMatchMedia('(max-width: 575px)'));
        expect(result.current).toBe(expect.any(Boolean));
    });
});

import { useState, useEffect } from 'react';

export const useMatchMedia = (query: string) => {
    const [matches, setMatches] = useState(false);

    useEffect(() => {
        const media = window.matchMedia(query);
        if (media.matches !== matches) {
            setMatches(media.matches);
        }
        const listener = () => setMatches(media.matches);
        window.addEventListener('resize', listener);
        return () => window.removeEventListener('resize', listener);
    }, [matches, query]);

    return matches;
};

const mediaQuery1 = '(prefers-color-scheme: light)';
const mediaQuery2 = '(min-width: 640px)';
const listener1 = jest.fn();
const listener2 = jest.fn();
const mql1 = window.matchMedia(mediaQuery1);
const mql2 = window.matchMedia(mediaQuery2);
mql1.addListener(listener1);
mql2.addListener(listener2);

matchMedia.useMediaQuery(mediaQuery1, true);
matchMedia.useMediaQuery(mediaQuery2, true);
expect(listener1).toBeCalledTimes(1);
expect(listener2).toBeCalledTimes(1);
listener1.mockReset();
listener2.mockReset();
matchMedia.useMediaQuery(mediaQuery2, false);
expect(listener1).toBeCalledTimes(0);
expect(listener2).toBeCalledTimes(1);