The Node.js® Website
keii.dev
1import { renderHook } from '@testing-library/react';
2
3import { useMediaQuery } from '..';
4
5describe('useMediaQuery', () => {
6 it('should check for matchMedia support', () => {
7 const { result } = renderHook(() => useMediaQuery('media-query-mock'));
8
9 expect(result.current).toBe(undefined);
10 });
11
12 it('should return true for matched query', () => {
13 Object.defineProperty(window, 'matchMedia', {
14 writable: true,
15 value: () => ({
16 matches: true,
17 addEventListener: jest.fn(),
18 removeEventListener: jest.fn(),
19 }),
20 });
21
22 const { result } = renderHook(() => useMediaQuery('media-query-mock'));
23
24 expect(result.current).toBe(true);
25 });
26
27 it('should return false for not-matched query', () => {
28 Object.defineProperty(window, 'matchMedia', {
29 writable: true,
30 value: () => ({
31 matches: false,
32 addEventListener: jest.fn(),
33 removeEventListener: jest.fn(),
34 }),
35 });
36
37 const { result } = renderHook(() => useMediaQuery('media-query-mock'));
38
39 expect(result.current).toBe(false);
40 });
41
42 it('should subscribe for media changes', () => {
43 const listenerMock = jest.fn().mockImplementation((_, handler) => {
44 handler();
45 });
46
47 Object.defineProperty(window, 'matchMedia', {
48 writable: true,
49 value: () => ({
50 matches: false,
51 addEventListener: listenerMock,
52 removeEventListener: jest.fn(),
53 }),
54 });
55
56 renderHook(() => useMediaQuery('media-query-mock'));
57
58 expect(listenerMock).toHaveBeenCalledTimes(1);
59 });
60
61 it("should support MediaQueryList's old event listeners", () => {
62 const listenerMock = jest.fn().mockImplementation(handler => {
63 handler();
64 });
65
66 Object.defineProperty(window, 'matchMedia', {
67 writable: true,
68 value: () => ({
69 matches: false,
70 addListener: listenerMock,
71 removeListener: jest.fn(),
72 }),
73 });
74
75 renderHook(() => useMediaQuery('media-query-mock'));
76 expect(listenerMock).toHaveBeenCalledTimes(1);
77 });
78});