test: 修复loadable会导致测试用例不通过的问题

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: {},

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;
+}

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,

web/test/setup.js

@@ -0,0 +1 @@
+jest.mock('../src/components/Loadable');