src/App.test.tsx

@@ -2,6 +2,22 @@ import React from 'react'
 import { render, screen } from '@testing-library/react'
 import App from './App'
 
+beforeEach(() => {
+  Object.defineProperty(window, 'matchMedia', {
+    writable: true,
+    value: jest.fn().mockImplementation((query) => ({
+      matches: false,
+      media: query,
+      onchange: null,
+      addListener: jest.fn(), // deprecated
+      removeListener: jest.fn(), // deprecated
+      addEventListener: jest.fn(),
+      removeEventListener: jest.fn(),
+      dispatchEvent: jest.fn(),
+    })),
+  })
+})
+
 test('renders App component', () => {
   render(<App />)
   const linkElement = screen.getByText(/Not Wordle/)

src/components/grid/Cell.tsx

@@ -10,11 +10,14 @@ export const Cell = ({ value, status }: Props) => {
   const classes = classnames(
     'w-14 h-14 border-solid border-2 flex items-center justify-center mx-0.5 text-lg font-bold rounded dark:text-white',
     {
-      'bg-white dark:bg-slate-900 border-slate-200 dark:border-slate-600': !status,
+      'bg-white dark:bg-slate-900 border-slate-200 dark:border-slate-600':
+        !status,
       'border-black dark:border-slate-100': value && !status,
-      'bg-slate-400 dark:bg-slate-700 text-white border-slate-400 dark:border-slate-700': status === 'absent',
+      'bg-slate-400 dark:bg-slate-700 text-white border-slate-400 dark:border-slate-700':
+        status === 'absent',
       'bg-green-500 text-white border-green-500': status === 'correct',
-      'bg-yellow-500 dark:bg-yellow-700 text-white border-yellow-500 dark:border-yellow-700': status === 'present',
+      'bg-yellow-500 dark:bg-yellow-700 text-white border-yellow-500 dark:border-yellow-700':
+        status === 'present',
       'cell-animation': !!value,
     }
   )

src/components/keyboard/Key.tsx

@@ -21,7 +21,8 @@ export const Key = ({
   const classes = classnames(
     'flex items-center justify-center rounded mx-0.5 text-xs font-bold cursor-pointer select-none dark:text-white',
     {
-      'bg-slate-200 dark:bg-slate-600 hover:bg-slate-300 active:bg-slate-400': !status,
+      'bg-slate-200 dark:bg-slate-600 hover:bg-slate-300 active:bg-slate-400':
+        !status,
       'bg-slate-400 text-white': status === 'absent',
       'bg-green-500 hover:bg-green-600 active:bg-green-700 text-white':
         status === 'correct',