From 12d170a7987c6b02514e1e2b5ba5d86c29d87b6a Mon Sep 17 00:00:00 2001
From: Gao Sun <gaosun.dev@gmail.com>
Date: Mon, 2 Aug 2021 23:45:55 +0800
Subject: [PATCH] chore(ui): add patch to `matchMedia`

---
 packages/ui/razzle.config.js  |  1 +
 packages/ui/src/App.tsx       |  2 +-
 packages/ui/src/init/i18n.ts  |  5 ++---
 packages/ui/src/jest.setup.ts | 18 ++++++++++++++++++
 4 files changed, 22 insertions(+), 4 deletions(-)
 create mode 100644 packages/ui/src/jest.setup.ts

diff --git a/packages/ui/razzle.config.js b/packages/ui/razzle.config.js
index 2b52e67ec..dfb5be02b 100644
--- a/packages/ui/razzle.config.js
+++ b/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;
   },
diff --git a/packages/ui/src/App.tsx b/packages/ui/src/App.tsx
index 9688902b7..4708eb98c 100644
--- a/packages/ui/src/App.tsx
+++ b/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();
diff --git a/packages/ui/src/init/i18n.ts b/packages/ui/src/init/i18n.ts
index 304a84dab..1250f183d 100644
--- a/packages/ui/src/init/i18n.ts
+++ b/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 = () => {
-  void i18n
+const initI18n = async () =>
+  i18n
     .use(initReactI18next)
     .use(LanguageDetector)
     .init({
@@ -14,6 +14,5 @@ const initI18n = () => {
         escapeValue: false,
       },
     });
-};
 
 export default initI18n;
diff --git a/packages/ui/src/jest.setup.ts b/packages/ui/src/jest.setup.ts
new file mode 100644
index 000000000..49b9cc863
--- /dev/null
+++ b/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 {};