feat: add test for useReducedMotion

package.json

@@ -76,7 +76,7 @@
     "@react-three/fiber": "^7.0.26",
     "@testing-library/cypress": "^8.0.2",
     "@testing-library/jest-dom": "^5.16.3",
-    "@testing-library/react": "^13.0.0",
+    "@testing-library/react": "^13.2.0",
     "@types/jest": "^27.4.0",
     "@types/lodash.clamp": "^4.0.6",
     "@types/lodash.shuffle": "^4.2.6",

packages/shared/src/hooks/useReducedMotion.test.ts

@@ -0,0 +1,91 @@
+import { act, renderHook } from '@testing-library/react'
+
+import { useReducedMotion } from './useReducedMotion'
+
+describe('useReducedMotion', () => {
+  let EVENTS: Record<string, MediaQueryHandler> = {}
+
+  const removeEventListenerMock = jest.fn()
+
+  type MediaQueryHandler = (mediaQuery: typeof mqDefaults) => void
+
+  const mqDefaults = {
+    matches: false,
+    onchange: null,
+    addEventListener: (name: string, handle: MediaQueryHandler) => {
+      EVENTS[name] = handle
+    },
+    removeEventListener: removeEventListenerMock,
+  }
+
+  afterEach(() => {
+    // reset events
+    EVENTS = {}
+
+    jest.clearAllMocks()
+  })
+
+  it('returns true if "Reduce motion" is enabled', async () => {
+    window.matchMedia = jest.fn().mockImplementation(query => {
+      return {
+        ...mqDefaults,
+        matches: true,
+        media: query,
+      }
+    })
+
+    const { result } = renderHook(useReducedMotion)
+
+    expect(result.current).toBe(true)
+  })
+
+  it('returns false if "Reduce motion" is disabled', async () => {
+    window.matchMedia = jest.fn().mockImplementation(query => {
+      return {
+        ...mqDefaults,
+        media: query,
+      }
+    })
+
+    const { result } = renderHook(useReducedMotion)
+
+    expect(result.current).toBe(false)
+  })
+
+  it('handles change of "prefers-reduce-motion" media query value', async () => {
+    window.matchMedia = jest.fn().mockImplementation(query => {
+      return {
+        ...mqDefaults,
+        media: query,
+      }
+    })
+
+    const { result } = renderHook(useReducedMotion)
+
+    expect(result.current).toBe(false)
+
+    act(() => {
+      EVENTS.change({
+        ...mqDefaults,
+        matches: true,
+      })
+    })
+
+    expect(result.current).toBe(true)
+  })
+
+  it('successfully removes listener on unmount', () => {
+    window.matchMedia = jest.fn().mockImplementation(query => {
+      return {
+        ...mqDefaults,
+        media: query,
+      }
+    })
+
+    const { unmount } = renderHook(useReducedMotion)
+
+    unmount()
+
+    expect(removeEventListenerMock).toHaveBeenCalled()
+  })
+})

yarn.lock

@@ -4104,17 +4104,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@testing-library/react@npm:^13.0.0":
-  version: 13.0.0
-  resolution: "@testing-library/react@npm:13.0.0"
+"@testing-library/react@npm:^13.2.0":
+  version: 13.2.0
+  resolution: "@testing-library/react@npm:13.2.0"
   dependencies:
     "@babel/runtime": ^7.12.5
     "@testing-library/dom": ^8.5.0
-    "@types/react-dom": "*"
+    "@types/react-dom": ^18.0.0
   peerDependencies:
     react: ^18.0.0
     react-dom: ^18.0.0
-  checksum: 75c2348cff6ac00f22c997c72f1444a802ebe6e671c8db70f203070d0e5d4c5a7e31d62cd86e2eedde68558834b256f99a972fe45b15fd2356e3c65b5515e197
+  checksum: 29f4a97c932a7fd78a55791a0ae0ba8d33c5241acbade98b6714440981e6e3d86a243e0b22161d3323b549ce059c175ae56d6b5053ad44083ab6e40ca211f19e
   languageName: node
   linkType: hard
 
@@ -4439,16 +4439,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react-dom@npm:*":
-  version: 17.0.14
-  resolution: "@types/react-dom@npm:17.0.14"
-  dependencies:
-    "@types/react": "*"
-  checksum: b54cd0ef573236b3d87fe7493e6d1c36d8b4ca37a3b46364272a5c91ac178e3296b68ea1aeb299ce68f12ad663c5720ee890d0539b14881c6754bdcbdb0befa0
-  languageName: node
-  linkType: hard
-
-"@types/react-dom@npm:^18.0.3":
+"@types/react-dom@npm:^18.0.0, @types/react-dom@npm:^18.0.3":
   version: 18.0.3
   resolution: "@types/react-dom@npm:18.0.3"
   dependencies:
@@ -12844,7 +12835,7 @@ __metadata:
     "@react-three/fiber": ^7.0.26
     "@testing-library/cypress": ^8.0.2
     "@testing-library/jest-dom": ^5.16.3
-    "@testing-library/react": ^13.0.0
+    "@testing-library/react": ^13.2.0
     "@types/jest": ^27.4.0
     "@types/lodash.clamp": ^4.0.6
     "@types/lodash.shuffle": ^4.2.6