chore(ui): add patch to matchMedia

packages/ui/razzle.config.js

@@ -26,6 +26,7 @@ module.exports = {
       '^.+\\.(css|less|scss)$': 'babel-jest',
       '@/(.*)': '<rootDir>/src/$1',
     };
+    config.setupFilesAfterEnv = [...config.setupFilesAfterEnv, './src/jest.setup.ts'];
 
     return config;
   },

packages/ui/src/App.tsx

@@ -8,7 +8,7 @@ import SignIn from './pages/SignIn';
 import Register from './pages/Register';
 import './scss/normalized.scss';
 
-initI18n();
+void initI18n();
 
 const App = () => {
   const theme = useTheme();

packages/ui/src/init/i18n.ts

@@ -3,8 +3,8 @@ import LanguageDetector from 'i18next-browser-languagedetector';
 import { initReactI18next } from 'react-i18next';
 import resources from '@logto/phrases';
 
-const initI18n = () => {
+const initI18n = async () =>
-  void i18n
+  i18n
     .use(initReactI18next)
     .use(LanguageDetector)
     .init({
@@ -14,6 +14,5 @@ const initI18n = () => {
         escapeValue: false,
       },
     });
-};
 
 export default initI18n;

packages/ui/src/jest.setup.ts

@@ -0,0 +1,18 @@
+// https://jestjs.io/docs/manual-mocks#mocking-methods-which-are-not-implemented-in-jsdom
+
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: jest.fn().mockImplementation((query) => ({
+    matches: false,
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+    media: query,
+    onchange: null,
+    addListener: jest.fn(), // Deprecated
+    removeListener: jest.fn(), // Deprecated
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+    dispatchEvent: jest.fn(),
+  })),
+});
+
+export {};