From 55f07bba5c5821d5facba0256ce749f4d1e5aec9 Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Fri, 24 Dec 2021 16:05:01 +0800
Subject: [PATCH] =?UTF-8?q?test:=20=E4=BF=AE=E5=A4=8Dloadable=E4=BC=9A?=
 =?UTF-8?q?=E5=AF=BC=E8=87=B4=E6=B5=8B=E8=AF=95=E7=94=A8=E4=BE=8B=E4=B8=8D?=
 =?UTF-8?q?=E9=80=9A=E8=BF=87=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/jest.config.js                            |  2 +-
 web/src/components/__mocks__/Loadable.tsx     | 23 +++++++++++++++++++
 .../modals/GroupPanel/ModifyGroupPanel.tsx    |  2 +-
 web/test/setup.js                             |  1 +
 4 files changed, 26 insertions(+), 2 deletions(-)
 create mode 100644 web/src/components/__mocks__/Loadable.tsx
 create mode 100644 web/test/setup.js

diff --git a/web/jest.config.js b/web/jest.config.js
index d59fbf90..5ec5e591 100644
--- a/web/jest.config.js
+++ b/web/jest.config.js
@@ -21,7 +21,7 @@ module.exports = {
       '<rootDir>/../test/fileTransformer.js',
   },
   transformIgnorePatterns: ['/node_modules/'],
-  setupFiles: ['<rootDir>/../test/setup.js'],
+  setupFiles: ['<rootDir>/../test/setup.js', '<rootDir>/test/setup.js'],
   setupFilesAfterEnv: [],
   globals: {
     window: {},
diff --git a/web/src/components/__mocks__/Loadable.tsx b/web/src/components/__mocks__/Loadable.tsx
new file mode 100644
index 00000000..042b6409
--- /dev/null
+++ b/web/src/components/__mocks__/Loadable.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+
+// Reference: https://medium.com/pixel-and-ink/testing-loadable-components-with-jest-97bfeaa6da0b
+
+// Loadable components is tied to webpack, seems most people use webpack in their tests.
+// Rather than that, we mock the loadable function to load the module eagarly and expose a load() function to be able to await the load
+export function Loadable(load: any) {
+  let Component: any;
+  // Capture the component from the module load function
+  const loadPromise = load().then((val: any) => (Component = val.default));
+  // Create a react component which renders the loaded component
+  const Loadable = (props: any) => {
+    if (!Component) {
+      throw new Error(
+        'Bundle split module not loaded yet, ensure you beforeAll(() => MyLazyComponent.load()) in your test, import statement: ' +
+          load.toString()
+      );
+    }
+    return <Component {...props} />;
+  };
+  Loadable.load = () => loadPromise;
+  return Loadable;
+}
diff --git a/web/src/components/modals/GroupPanel/ModifyGroupPanel.tsx b/web/src/components/modals/GroupPanel/ModifyGroupPanel.tsx
index ecf54642..dfd9d07c 100644
--- a/web/src/components/modals/GroupPanel/ModifyGroupPanel.tsx
+++ b/web/src/components/modals/GroupPanel/ModifyGroupPanel.tsx
@@ -1,5 +1,5 @@
 import { LoadingSpinner } from '@/components/LoadingSpinner';
-import React, { useEffect, useLayoutEffect, useState } from 'react';
+import React, { useState } from 'react';
 import {
   t,
   useAsyncRequest,
diff --git a/web/test/setup.js b/web/test/setup.js
new file mode 100644
index 00000000..349c35d5
--- /dev/null
+++ b/web/test/setup.js
@@ -0,0 +1 @@
+jest.mock('../src/components/Loadable');