Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Not working with Jest 27.5.1 #19

Open
morewings opened this issue May 31, 2022 · 0 comments
Open

Not working with Jest 27.5.1 #19

morewings opened this issue May 31, 2022 · 0 comments

Comments

@morewings
Copy link

morewings commented May 31, 2022

I have this test file:

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));
    });
});

with this hook

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;
};

and have this error

TypeError: window.matchMedia is not a function

Thanks.

# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant