From 3d2634a6d799cc748df4e0c4ec62aedba33de889 Mon Sep 17 00:00:00 2001 From: Ayc0 Date: Tue, 19 May 2026 10:50:39 +0200 Subject: [PATCH 1/2] Add tests --- packages/tests/src/Hook.tsx | 15 + .../src/__tests__/__snapshots__/ssr.ts.snap | 450 ++++++++++++++++++ .../tests/src/__tests__/useMediaQuery.tsx | 124 +++++ 3 files changed, 589 insertions(+) create mode 100644 packages/tests/src/__tests__/useMediaQuery.tsx diff --git a/packages/tests/src/Hook.tsx b/packages/tests/src/Hook.tsx index 558f383..e04bb42 100644 --- a/packages/tests/src/Hook.tsx +++ b/packages/tests/src/Hook.tsx @@ -37,6 +37,9 @@ const Hook = () => { ); const isWrongBreakpoint = useBreakpoint("wrong"); const isWrongMedia = useMediaQuery("wrong"); + const isEmptyMedia = useMediaQuery(""); + const isAlwaysFalseMedia = useMediaQuery("(max-width:0)"); + const isAlwaysTrueMedia = useMediaQuery("all"); return ( <> @@ -116,6 +119,18 @@ const Hook = () => { wrong media query: {toString(isWrongMedia)}

+

+ empty media query: + {toString(isEmptyMedia)} +

+

+ (max-width:0): + {toString(isAlwaysFalseMedia)} +

+

+ all: + {toString(isAlwaysTrueMedia)} +

); }; diff --git a/packages/tests/src/__tests__/__snapshots__/ssr.ts.snap b/packages/tests/src/__tests__/__snapshots__/ssr.ts.snap index e325537..c94d3d5 100644 --- a/packages/tests/src/__tests__/__snapshots__/ssr.ts.snap +++ b/packages/tests/src/__tests__/__snapshots__/ssr.ts.snap @@ -51,6 +51,12 @@ wrong breakpoint: false wrong media query: false +empty media query: true + +(max-width:0): false + +all: true + useBreakpoint() with heights isThin: true @@ -133,6 +139,12 @@ wrong breakpoint: false wrong media query: false +empty media query: true + +(max-width:0): false + +all: true + useBreakpoint() with heights isThin: false @@ -211,6 +223,12 @@ wrong breakpoint: false wrong media query: false +empty media query: true + +(max-width:0): false + +all: true + useBreakpoint() with heights isThin: false @@ -287,6 +305,12 @@ wrong breakpoint: false wrong media query: false +empty media query: true + +(max-width:0): false + +all: true + useBreakpoint() with heights isThin: false @@ -359,6 +383,12 @@ wrong breakpoint: false wrong media query: false +empty media query: true + +(max-width:0): false + +all: true + useBreakpoint() with heights isThin: false @@ -431,6 +461,12 @@ wrong breakpoint: false wrong media query: false +empty media query: true + +(max-width:0): false + +all: true + useBreakpoint() with heights isThin: false @@ -507,6 +543,12 @@ wrong breakpoint: false wrong media query: false +empty media query: true + +(max-width:0): false + +all: true + useBreakpoint() with heights isThin: false @@ -579,6 +621,12 @@ wrong breakpoint: false wrong media query: false +empty media query: true + +(max-width:0): false + +all: true + useBreakpoint() with heights isThin: false @@ -651,6 +699,12 @@ wrong breakpoint: false wrong media query: false +empty media query: true + +(max-width:0): false + +all: true + useBreakpoint() with heights isThin: false @@ -723,6 +777,12 @@ wrong breakpoint: false wrong media query: false +empty media query: true + +(max-width:0): false + +all: true + useBreakpoint() with heights isThin: false @@ -803,6 +863,12 @@ wrong breakpoint: false wrong media query: false +empty media query: true + +(max-width:0): false + +all: true + useBreakpoint() with heights isThin: false @@ -879,6 +945,12 @@ wrong breakpoint: false wrong media query: false +empty media query: true + +(max-width:0): false + +all: true + useBreakpoint() with heights isThin: false @@ -955,6 +1027,12 @@ wrong breakpoint: false wrong media query: false +empty media query: true + +(max-width:0): false + +all: true + useBreakpoint() with heights isThin: false @@ -1031,6 +1109,12 @@ wrong breakpoint: false wrong media query: false +empty media query: true + +(max-width:0): false + +all: true + useBreakpoint() with heights isThin: false @@ -1107,6 +1191,12 @@ wrong breakpoint: false wrong media query: false +empty media query: true + +(max-width:0): false + +all: true + useBreakpoint() with heights isThin: false @@ -1181,6 +1271,12 @@ wrong breakpoint: false wrong media query: false +empty media query: true + +(max-width:0): false + +all: true + useBreakpoint() with heights isThin: true @@ -1263,6 +1359,12 @@ wrong breakpoint: false wrong media query: false +empty media query: true + +(max-width:0): false + +all: true + useBreakpoint() with heights isThin: false @@ -1341,6 +1443,12 @@ wrong breakpoint: false wrong media query: false +empty media query: true + +(max-width:0): false + +all: true + useBreakpoint() with heights isThin: false @@ -1417,6 +1525,12 @@ wrong breakpoint: false wrong media query: false +empty media query: true + +(max-width:0): false + +all: true + useBreakpoint() with heights isThin: false @@ -1489,6 +1603,12 @@ wrong breakpoint: false wrong media query: false +empty media query: true + +(max-width:0): false + +all: true + useBreakpoint() with heights isThin: false @@ -1561,6 +1681,12 @@ wrong breakpoint: false wrong media query: false +empty media query: true + +(max-width:0): false + +all: true + useBreakpoint() with heights isThin: false @@ -1637,6 +1763,12 @@ wrong breakpoint: false wrong media query: false +empty media query: true + +(max-width:0): false + +all: true + useBreakpoint() with heights isThin: false @@ -1709,6 +1841,12 @@ wrong breakpoint: false wrong media query: false +empty media query: true + +(max-width:0): false + +all: true + useBreakpoint() with heights isThin: false @@ -1781,6 +1919,12 @@ wrong breakpoint: false wrong media query: false +empty media query: true + +(max-width:0): false + +all: true + useBreakpoint() with heights isThin: false @@ -1853,6 +1997,12 @@ wrong breakpoint: false wrong media query: false +empty media query: true + +(max-width:0): false + +all: true + useBreakpoint() with heights isThin: false @@ -1933,6 +2083,12 @@ wrong breakpoint: false wrong media query: false +empty media query: true + +(max-width:0): false + +all: true + useBreakpoint() with heights isThin: false @@ -2009,6 +2165,12 @@ wrong breakpoint: false wrong media query: false +empty media query: true + +(max-width:0): false + +all: true + useBreakpoint() with heights isThin: false @@ -2085,6 +2247,12 @@ wrong breakpoint: false wrong media query: false +empty media query: true + +(max-width:0): false + +all: true + useBreakpoint() with heights isThin: false @@ -2161,6 +2329,12 @@ wrong breakpoint: false wrong media query: false +empty media query: true + +(max-width:0): false + +all: true + useBreakpoint() with heights isThin: false @@ -2237,6 +2411,12 @@ wrong breakpoint: false wrong media query: false +empty media query: true + +(max-width:0): false + +all: true + useBreakpoint() with heights isThin: false @@ -2311,6 +2491,12 @@ wrong breakpoint: false wrong media query: false +empty media query: true + +(max-width:0): false + +all: true + useBreakpoint() with heights isThin: true @@ -2393,6 +2579,12 @@ wrong breakpoint: false wrong media query: false +empty media query: true + +(max-width:0): false + +all: true + useBreakpoint() with heights isThin: false @@ -2471,6 +2663,12 @@ wrong breakpoint: false wrong media query: false +empty media query: true + +(max-width:0): false + +all: true + useBreakpoint() with heights isThin: false @@ -2547,6 +2745,12 @@ wrong breakpoint: false wrong media query: false +empty media query: true + +(max-width:0): false + +all: true + useBreakpoint() with heights isThin: false @@ -2619,6 +2823,12 @@ wrong breakpoint: false wrong media query: false +empty media query: true + +(max-width:0): false + +all: true + useBreakpoint() with heights isThin: false @@ -2691,6 +2901,12 @@ wrong breakpoint: false wrong media query: false +empty media query: true + +(max-width:0): false + +all: true + useBreakpoint() with heights isThin: false @@ -2767,6 +2983,12 @@ wrong breakpoint: false wrong media query: false +empty media query: true + +(max-width:0): false + +all: true + useBreakpoint() with heights isThin: false @@ -2839,6 +3061,12 @@ wrong breakpoint: false wrong media query: false +empty media query: true + +(max-width:0): false + +all: true + useBreakpoint() with heights isThin: false @@ -2911,6 +3139,12 @@ wrong breakpoint: false wrong media query: false +empty media query: true + +(max-width:0): false + +all: true + useBreakpoint() with heights isThin: false @@ -2983,6 +3217,12 @@ wrong breakpoint: false wrong media query: false +empty media query: true + +(max-width:0): false + +all: true + useBreakpoint() with heights isThin: false @@ -3063,6 +3303,12 @@ wrong breakpoint: false wrong media query: false +empty media query: true + +(max-width:0): false + +all: true + useBreakpoint() with heights isThin: false @@ -3139,6 +3385,12 @@ wrong breakpoint: false wrong media query: false +empty media query: true + +(max-width:0): false + +all: true + useBreakpoint() with heights isThin: false @@ -3215,6 +3467,12 @@ wrong breakpoint: false wrong media query: false +empty media query: true + +(max-width:0): false + +all: true + useBreakpoint() with heights isThin: false @@ -3291,6 +3549,12 @@ wrong breakpoint: false wrong media query: false +empty media query: true + +(max-width:0): false + +all: true + useBreakpoint() with heights isThin: false @@ -3367,6 +3631,12 @@ wrong breakpoint: false wrong media query: false +empty media query: true + +(max-width:0): false + +all: true + useBreakpoint() with heights isThin: false @@ -3441,6 +3711,12 @@ wrong breakpoint: false wrong media query: false +empty media query: true + +(max-width:0): false + +all: true + useBreakpoint() with heights isThin: true @@ -3523,6 +3799,12 @@ wrong breakpoint: false wrong media query: false +empty media query: true + +(max-width:0): false + +all: true + useBreakpoint() with heights isThin: false @@ -3601,6 +3883,12 @@ wrong breakpoint: false wrong media query: false +empty media query: true + +(max-width:0): false + +all: true + useBreakpoint() with heights isThin: false @@ -3677,6 +3965,12 @@ wrong breakpoint: false wrong media query: false +empty media query: true + +(max-width:0): false + +all: true + useBreakpoint() with heights isThin: false @@ -3749,6 +4043,12 @@ wrong breakpoint: false wrong media query: false +empty media query: true + +(max-width:0): false + +all: true + useBreakpoint() with heights isThin: false @@ -3821,6 +4121,12 @@ wrong breakpoint: false wrong media query: false +empty media query: true + +(max-width:0): false + +all: true + useBreakpoint() with heights isThin: false @@ -3897,6 +4203,12 @@ wrong breakpoint: false wrong media query: false +empty media query: true + +(max-width:0): false + +all: true + useBreakpoint() with heights isThin: false @@ -3969,6 +4281,12 @@ wrong breakpoint: false wrong media query: false +empty media query: true + +(max-width:0): false + +all: true + useBreakpoint() with heights isThin: false @@ -4041,6 +4359,12 @@ wrong breakpoint: false wrong media query: false +empty media query: true + +(max-width:0): false + +all: true + useBreakpoint() with heights isThin: false @@ -4113,6 +4437,12 @@ wrong breakpoint: false wrong media query: false +empty media query: true + +(max-width:0): false + +all: true + useBreakpoint() with heights isThin: false @@ -4193,6 +4523,12 @@ wrong breakpoint: false wrong media query: false +empty media query: true + +(max-width:0): false + +all: true + useBreakpoint() with heights isThin: false @@ -4269,6 +4605,12 @@ wrong breakpoint: false wrong media query: false +empty media query: true + +(max-width:0): false + +all: true + useBreakpoint() with heights isThin: false @@ -4345,6 +4687,12 @@ wrong breakpoint: false wrong media query: false +empty media query: true + +(max-width:0): false + +all: true + useBreakpoint() with heights isThin: false @@ -4421,6 +4769,12 @@ wrong breakpoint: false wrong media query: false +empty media query: true + +(max-width:0): false + +all: true + useBreakpoint() with heights isThin: false @@ -4497,6 +4851,12 @@ wrong breakpoint: false wrong media query: false +empty media query: true + +(max-width:0): false + +all: true + useBreakpoint() with heights isThin: false @@ -4571,6 +4931,12 @@ wrong breakpoint: false wrong media query: false +empty media query: true + +(max-width:0): false + +all: true + useBreakpoint() with heights isThin: true @@ -4653,6 +5019,12 @@ wrong breakpoint: false wrong media query: false +empty media query: true + +(max-width:0): false + +all: true + useBreakpoint() with heights isThin: false @@ -4731,6 +5103,12 @@ wrong breakpoint: false wrong media query: false +empty media query: true + +(max-width:0): false + +all: true + useBreakpoint() with heights isThin: false @@ -4807,6 +5185,12 @@ wrong breakpoint: false wrong media query: false +empty media query: true + +(max-width:0): false + +all: true + useBreakpoint() with heights isThin: false @@ -4879,6 +5263,12 @@ wrong breakpoint: false wrong media query: false +empty media query: true + +(max-width:0): false + +all: true + useBreakpoint() with heights isThin: false @@ -4951,6 +5341,12 @@ wrong breakpoint: false wrong media query: false +empty media query: true + +(max-width:0): false + +all: true + useBreakpoint() with heights isThin: false @@ -5027,6 +5423,12 @@ wrong breakpoint: false wrong media query: false +empty media query: true + +(max-width:0): false + +all: true + useBreakpoint() with heights isThin: false @@ -5099,6 +5501,12 @@ wrong breakpoint: false wrong media query: false +empty media query: true + +(max-width:0): false + +all: true + useBreakpoint() with heights isThin: false @@ -5171,6 +5579,12 @@ wrong breakpoint: false wrong media query: false +empty media query: true + +(max-width:0): false + +all: true + useBreakpoint() with heights isThin: false @@ -5243,6 +5657,12 @@ wrong breakpoint: false wrong media query: false +empty media query: true + +(max-width:0): false + +all: true + useBreakpoint() with heights isThin: false @@ -5323,6 +5743,12 @@ wrong breakpoint: false wrong media query: false +empty media query: true + +(max-width:0): false + +all: true + useBreakpoint() with heights isThin: false @@ -5399,6 +5825,12 @@ wrong breakpoint: false wrong media query: false +empty media query: true + +(max-width:0): false + +all: true + useBreakpoint() with heights isThin: false @@ -5475,6 +5907,12 @@ wrong breakpoint: false wrong media query: false +empty media query: true + +(max-width:0): false + +all: true + useBreakpoint() with heights isThin: false @@ -5551,6 +5989,12 @@ wrong breakpoint: false wrong media query: false +empty media query: true + +(max-width:0): false + +all: true + useBreakpoint() with heights isThin: false @@ -5627,6 +6071,12 @@ wrong breakpoint: false wrong media query: false +empty media query: true + +(max-width:0): false + +all: true + useBreakpoint() with heights isThin: false diff --git a/packages/tests/src/__tests__/useMediaQuery.tsx b/packages/tests/src/__tests__/useMediaQuery.tsx new file mode 100644 index 0000000..25d98d6 --- /dev/null +++ b/packages/tests/src/__tests__/useMediaQuery.tsx @@ -0,0 +1,124 @@ +/** + * @jest-environment jsdom + */ + +import { act, render } from "@testing-library/react"; +import { cleanup, setMedia } from "mock-match-media"; + +import { useMediaQuery } from "@blocz/react-responsive"; + +const Probe = ({ + query, + onRender, +}: { + query: string; + onRender: (value: boolean) => void; +}) => { + const value = useMediaQuery(query); + onRender(value); + return null; +}; + +const wait = (ms: number) => + new Promise((res) => setTimeout(res, ms)); + +afterEach(() => { + cleanup(); +}); + +describe("useMediaQuery", () => { + it("reacts to media changes after mount", async () => { + setMedia({ width: 1000 }); + + const onRender = jest.fn(); + render( + , + ); + + expect(onRender.mock.calls.at(-1)?.[0]).toBe(false); + + await act(async () => { + setMedia({ width: 1300 }); + await wait(0); + }); + + expect(onRender.mock.calls.at(-1)?.[0]).toBe(true); + }); + + it("re-subscribes when the query changes", async () => { + setMedia({ width: 1000 }); + + const onRender = jest.fn(); + const { rerender } = render( + , + ); + + expect(onRender.mock.calls.at(-1)?.[0]).toBe(true); + + rerender( + , + ); + + expect(onRender.mock.calls.at(-1)?.[0]).toBe(false); + + await act(async () => { + setMedia({ width: 2500 }); + await wait(0); + }); + + expect(onRender.mock.calls.at(-1)?.[0]).toBe(true); + }); + + it("removes the listener on unmount", () => { + setMedia({ width: 1000 }); + + const addListener = jest.fn(); + const removeListener = jest.fn(); + const originalMatchMedia = window.matchMedia; + window.matchMedia = ((query: string) => { + const mql = originalMatchMedia(query); + const origAdd = mql.addListener.bind(mql); + const origRemove = mql.removeListener.bind(mql); + mql.addListener = (cb) => { + addListener(cb); + return origAdd(cb); + }; + mql.removeListener = (cb) => { + removeListener(cb); + return origRemove(cb); + }; + return mql; + }) as typeof window.matchMedia; + + try { + const onRender = jest.fn(); + const { unmount } = render( + , + ); + + expect(addListener).toHaveBeenCalledTimes(1); + expect(removeListener).not.toHaveBeenCalled(); + + unmount(); + + expect(removeListener).toHaveBeenCalledTimes(1); + expect(removeListener.mock.calls[0][0]).toBe( + addListener.mock.calls[0][0], + ); + } finally { + window.matchMedia = originalMatchMedia; + } + }); +}); From 1342e0c546f48371d35428cf3e76e2f84e0f4ab2 Mon Sep 17 00:00:00 2001 From: Ayc0 Date: Tue, 19 May 2026 10:53:31 +0200 Subject: [PATCH 2/2] Update snapshots --- .../__tests__/__snapshots__/browser.ts.snap | 30 +++++++++++++++++++ 1 file changed, 30 insertions(+) diff --git a/packages/tests/src/__tests__/__snapshots__/browser.ts.snap b/packages/tests/src/__tests__/__snapshots__/browser.ts.snap index 2d5d0e0..0a05cd2 100644 --- a/packages/tests/src/__tests__/__snapshots__/browser.ts.snap +++ b/packages/tests/src/__tests__/__snapshots__/browser.ts.snap @@ -51,6 +51,12 @@ wrong breakpoint: false wrong media query: false +empty media query: true + +(max-width:0): false + +all: true + useBreakpoint() with heights isThin: true @@ -131,6 +137,12 @@ wrong breakpoint: false wrong media query: false +empty media query: true + +(max-width:0): false + +all: true + useBreakpoint() with heights isThin: false @@ -205,6 +217,12 @@ wrong breakpoint: false wrong media query: false +empty media query: true + +(max-width:0): false + +all: true + useBreakpoint() with heights isThin: false @@ -279,6 +297,12 @@ wrong breakpoint: false wrong media query: false +empty media query: true + +(max-width:0): false + +all: true + useBreakpoint() with heights isThin: false @@ -357,6 +381,12 @@ wrong breakpoint: false wrong media query: false +empty media query: true + +(max-width:0): false + +all: true + useBreakpoint() with heights isThin: false