test(hooks): add testcase for use-media-query

components/utils-shared/__tests__/media-query.test.tsx

@@ -0,0 +1,79 @@
+import { Utils } from 'components'
+import { renderHook } from '@testing-library/react-hooks'
+// @ts-ignore
+import mediaQuery from 'css-mediaquery'
+const { useMediaQuery } = Utils
+
+const mediaListMock = (width: number) => {
+  ;(window as any).listeners = [] as Array<Function>
+  return (query: string) => {
+    return {
+      matches: mediaQuery.match(query, { width }),
+      addListener: (fn: Function) => (window as any).listeners.push(fn),
+      removeListener: () => {},
+    }
+  }
+}
+
+describe('UseMediaQuery with SSR', () => {
+  beforeAll(() => {
+    ;(window as any).matchMedia = undefined
+  })
+
+  it('should work correctly', () => {
+    const { result } = renderHook(() => useMediaQuery('xs'))
+    expect(result.current).toEqual(false)
+  })
+
+  it('should work correctly with ssr match', () => {
+    const ssrMatchMedia = (query: string) => ({
+      matches: mediaQuery.match(query, {
+        width: '100px',
+      }),
+    })
+    const { result } = renderHook(() =>
+      useMediaQuery('xs', {
+        ssrMatchMedia,
+      }),
+    )
+    expect(result.current).toEqual(true)
+
+    const { result: result2 } = renderHook(() =>
+      useMediaQuery('sm', {
+        ssrMatchMedia,
+      }),
+    )
+    expect(result2.current).toEqual(false)
+  })
+})
+
+describe('UseMediaQuery', () => {
+  beforeAll(() => {
+    ;(window as any).matchMedia = mediaListMock(1500)
+  })
+
+  it('should work correctly', () => {
+    const { result } = renderHook(() => useMediaQuery('xs'))
+    expect(result.current).toEqual(false)
+  })
+
+  it('should hit', () => {
+    const { result } = renderHook(() => useMediaQuery('lg'))
+    expect(result.current).toEqual(true)
+  })
+
+  it('different match types should be supported', () => {
+    const { result } = renderHook(() =>
+      useMediaQuery('md', {
+        match: 'up',
+      }),
+    )
+    expect(result.current).toEqual(true)
+    const { result: result2 } = renderHook(() =>
+      useMediaQuery('md', {
+        match: 'down',
+      }),
+    )
+    expect(result2.current).toEqual(false)
+  })
+})