@module-federation/bridge-react 2.3.2 → 2.4.0

package/__tests__/bridge.spec.tsx

@@ -1,160 +0,0 @@
-import React from 'react';
-import { createBridgeComponent, createRemoteAppComponent } from '../src';
-import {
-  act,
-  fireEvent,
-  render,
-  screen,
-  waitFor,
-} from '@testing-library/react';
-import { createContainer, getHtml } from './util';
-
-describe('bridge', () => {
-  let containerInfo: ReturnType<typeof createContainer>;
-  beforeEach(() => {
-    containerInfo = createContainer();
-  });
-
-  afterEach(() => {
-    containerInfo?.clean();
-  });
-
-  it('createBridgeComponent life cycle', async () => {
-    function Component() {
-      return <div>life cycle render</div>;
-    }
-    const lifeCycle = createBridgeComponent({
-      rootComponent: Component,
-    })();
-
-    lifeCycle.render({
-      dom: containerInfo?.container,
-    });
-
-    await waitFor(
-      () => {
-        expect(document.querySelector('#container')?.innerHTML).toContain(
-          '<div>life cycle render</div>',
-        );
-      },
-      { timeout: 2000 },
-    );
-
-    lifeCycle.destroy({
-      dom: containerInfo?.container,
-      moduleName: 'test',
-    });
-
-    await waitFor(
-      () => {
-        expect(
-          (document.querySelector('#container')?.innerHTML || '').trim(),
-        ).toBe('');
-      },
-      { timeout: 2000 },
-    );
-  });
-
-  it('createRemoteAppComponent', async () => {
-    function Component({ props }: { props?: Record<string, any> }) {
-      return <div>life cycle render {props?.msg}</div>;
-    }
-    const BridgeComponent = createBridgeComponent({
-      rootComponent: Component,
-    });
-    const RemoteComponent = createRemoteAppComponent({
-      loader: async () => {
-        return {
-          default: BridgeComponent,
-        };
-      },
-      fallback: () => <div></div>,
-      loading: <div>loading</div>,
-    });
-
-    const { container } = render(
-      <RemoteComponent props={{ msg: 'hello world' }} />,
-    );
-    expect(getHtml(container)).toMatch('loading');
-
-    await waitFor(
-      () => {
-        expect(getHtml(container)).toMatch('life cycle render');
-        expect(getHtml(container)).toMatch('hello world');
-      },
-      { timeout: 2000 },
-    );
-  });
-
-  it('createRemoteAppComponent and obtain ref property', async () => {
-    const ref = {
-      current: null,
-    };
-
-    function Component({ props }: { props?: Record<string, any> }) {
-      return <div>life cycle render {props?.msg}</div>;
-    }
-    const BridgeComponent = createBridgeComponent({
-      rootComponent: Component,
-    });
-    const RemoteComponent = createRemoteAppComponent({
-      loader: async () => {
-        return {
-          default: BridgeComponent,
-        };
-      },
-      fallback: () => <div></div>,
-      loading: <div>loading</div>,
-    });
-
-    const { container } = render(
-      <RemoteComponent ref={ref} props={{ msg: 'hello world' }} />,
-    );
-    expect(getHtml(container)).toMatch('loading');
-
-    await waitFor(
-      () => {
-        expect(getHtml(container)).toMatch('life cycle render');
-        expect(getHtml(container)).toMatch('hello world');
-        expect(ref.current).not.toBeNull();
-      },
-      { timeout: 2000 },
-    );
-  });
-
-  it('createRemoteAppComponent with custom createRoot prop', async () => {
-    const renderMock = jest.fn();
-
-    function Component({ props }: { props?: Record<string, any> }) {
-      return <div>life cycle render {props?.msg}</div>;
-    }
-    const BridgeComponent = createBridgeComponent({
-      rootComponent: Component,
-      createRoot: () => {
-        return {
-          render: renderMock,
-          unmount: jest.fn(),
-        };
-      },
-    });
-    const RemoteComponent = createRemoteAppComponent({
-      loader: async () => {
-        return {
-          default: BridgeComponent,
-        };
-      },
-      fallback: () => <div></div>,
-      loading: <div>loading</div>,
-    });
-
-    const { container } = render(<RemoteComponent />);
-    expect(getHtml(container)).toMatch('loading');
-
-    await waitFor(
-      () => {
-        expect(renderMock).toHaveBeenCalledTimes(1);
-      },
-      { timeout: 2000 },
-    );
-  });
-});

package/__tests__/createLazyComponent.spec.tsx

@@ -1,209 +0,0 @@
-import React, { Suspense } from 'react';
-import { render, screen, waitFor } from '@testing-library/react';
-import {
-  createLazyComponent,
-  collectSSRAssets,
-} from '../src/lazy/createLazyComponent';
-import * as runtime from '@module-federation/runtime';
-import * as utils from '../src/lazy/utils';
-
-// Mocking dependencies
-jest.mock('@module-federation/runtime');
-jest.mock('../src/lazy/utils');
-
-const mockGetInstance = runtime.getInstance as jest.Mock;
-const mockGetLoadedRemoteInfos = utils.getLoadedRemoteInfos as jest.Mock;
-const mockGetDataFetchMapKey = utils.getDataFetchMapKey as jest.Mock;
-const mockFetchData = utils.fetchData as jest.Mock;
-
-const MockComponent = () => <div>Mock Component</div>;
-const LoadingComponent = () => <div>Loading...</div>;
-const ErrorComponent = () => <div>Error!</div>;
-
-describe('createLazyComponent', () => {
-  let mockInstance: any;
-
-  beforeEach(() => {
-    jest.clearAllMocks();
-    mockInstance = {
-      name: 'host-app',
-      options: { version: '1.0.0' },
-      getModuleInfo: jest.fn(),
-    };
-    mockGetInstance.mockReturnValue(mockInstance);
-    mockGetLoadedRemoteInfos.mockReturnValue({
-      name: 'remoteApp',
-      alias: 'remote',
-      expose: './Component',
-      version: '1.0.0',
-      snapshot: {
-        modules: [
-          {
-            modulePath: './Component',
-            assets: {
-              css: { sync: [], async: [] },
-              js: { sync: [], async: [] },
-            },
-          },
-        ],
-        publicPath: 'http://localhost:3001/',
-        remoteEntry: 'remoteEntry.js',
-      },
-      entryGlobalName: 'remoteApp',
-    });
-    mockGetDataFetchMapKey.mockReturnValue('data-fetch-key');
-  });
-
-  it('should render loading component then the actual component', async () => {
-    const loader = jest.fn().mockResolvedValue({
-      default: MockComponent,
-      [Symbol.for('mf_module_id')]: 'remoteApp/Component',
-    });
-
-    const LazyComponent = createLazyComponent({
-      loader,
-      instance: mockInstance,
-      loading: <LoadingComponent />,
-      fallback: <ErrorComponent />,
-    });
-
-    render(
-      <Suspense fallback={<LoadingComponent />}>
-        <LazyComponent />
-      </Suspense>,
-    );
-
-    expect(screen.getByText('Loading...')).toBeInTheDocument();
-
-    await waitFor(() => {
-      expect(screen.getByText('Mock Component')).toBeInTheDocument();
-    });
-  });
-
-  it('should render fallback component on data fetch error', async () => {
-    mockFetchData.mockRejectedValue(new Error('Data fetch failed'));
-    const LazyComponentWithDataFetch = createLazyComponent({
-      loader: jest.fn().mockResolvedValue({
-        default: MockComponent,
-        [Symbol.for('mf_module_id')]: 'remoteApp/Component',
-      }),
-      instance: mockInstance,
-      loading: <LoadingComponent />,
-      fallback: <ErrorComponent />,
-    });
-
-    render(<LazyComponentWithDataFetch />);
-
-    await waitFor(() => {
-      expect(screen.getByText('Error!')).toBeInTheDocument();
-    });
-  });
-
-  it('should fetch data and pass it to the component', async () => {
-    const loader = jest.fn().mockResolvedValue({
-      default: (props: { mfData: any }) => (
-        <div>Data: {JSON.stringify(props.mfData)}</div>
-      ),
-      [Symbol.for('mf_module_id')]: 'remoteApp/Component',
-    });
-    const mockData = { message: 'Hello' };
-    mockFetchData.mockResolvedValue(mockData);
-
-    const LazyComponent = createLazyComponent({
-      loader,
-      instance: mockInstance,
-      loading: <LoadingComponent />,
-      fallback: <ErrorComponent />,
-    });
-
-    render(<LazyComponent />);
-
-    await waitFor(() => {
-      expect(
-        screen.getByText(`Data: ${JSON.stringify(mockData)}`),
-      ).toBeInTheDocument();
-    });
-  });
-});
-
-describe('collectSSRAssets', () => {
-  let mockInstance: any;
-
-  beforeEach(() => {
-    jest.clearAllMocks();
-    mockInstance = {
-      name: 'host-app',
-      options: { version: '1.0.0' },
-    };
-    mockGetInstance.mockReturnValue(mockInstance);
-  });
-
-  it('should return an empty array if instance is not available', () => {
-    const assets = collectSSRAssets({
-      id: 'test/expose',
-      instance: undefined as any,
-    });
-    expect(assets).toEqual([]);
-  });
-
-  it('should return an empty array if module info is not found', () => {
-    mockGetLoadedRemoteInfos.mockReturnValue(undefined);
-    const assets = collectSSRAssets({
-      id: 'test/expose',
-      instance: mockInstance,
-    });
-    expect(assets).toEqual([]);
-  });
-
-  it('should collect CSS and JS assets for SSR', () => {
-    mockGetLoadedRemoteInfos.mockReturnValue({
-      name: 'remoteApp',
-      expose: './Component',
-      snapshot: {
-        publicPath: 'http://localhost:3001/',
-        remoteEntry: 'remoteEntry.js',
-        modules: [
-          {
-            modulePath: './Component',
-            assets: {
-              css: { sync: ['main.css'], async: ['extra.css'] },
-              js: { sync: ['main.js'], async: [] },
-            },
-          },
-        ],
-      },
-    });
-
-    const assets = collectSSRAssets({
-      id: 'remoteApp/Component',
-      instance: mockInstance,
-      injectScript: true,
-      injectLink: true,
-    });
-
-    expect(assets).toHaveLength(4); // 2 links, 2 scripts
-
-    const links = assets.filter(
-      (asset) => (asset as React.ReactElement).type === 'link',
-    );
-    const scripts = assets.filter(
-      (asset) => (asset as React.ReactElement).type === 'script',
-    );
-
-    expect(links).toHaveLength(2);
-    expect((links[0] as React.ReactElement).props.href).toBe(
-      'http://localhost:3001/extra.css',
-    );
-    expect((links[1] as React.ReactElement).props.href).toBe(
-      'http://localhost:3001/main.css',
-    );
-
-    expect(scripts).toHaveLength(2);
-    expect((scripts[0] as React.ReactElement).props.src).toBe(
-      'http://localhost:3001/remoteEntry.js',
-    );
-    expect((scripts[1] as React.ReactElement).props.src).toBe(
-      'http://localhost:3001/main.js',
-    );
-  });
-});

package/__tests__/prefetch.spec.ts

@@ -1,156 +0,0 @@
-import { prefetch } from '../src/lazy/data-fetch/prefetch';
-import * as utils from '../src/lazy/utils';
-import logger from '../src/lazy/logger';
-import helpers from '@module-federation/runtime/helpers';
-
-// Mock dependencies
-jest.mock('../src/lazy/logger');
-jest.mock('../src/lazy/utils');
-jest.mock('@module-federation/runtime/helpers', () => ({
-  default: {
-    utils: {
-      matchRemoteWithNameAndExpose: jest.fn(),
-      getRemoteInfo: jest.fn(),
-    },
-  },
-  utils: {
-    matchRemoteWithNameAndExpose: jest.fn(),
-    getRemoteInfo: jest.fn(),
-  },
-}));
-
-describe('prefetch', () => {
-  let mockInstance: any;
-
-  beforeEach(() => {
-    jest.clearAllMocks();
-    mockInstance = {
-      name: 'host',
-      options: {
-        version: '1.0.0',
-        remotes: [
-          {
-            name: 'remote1',
-            alias: 'remote1_alias',
-            entry: 'http://localhost:3001/remoteEntry.js',
-          },
-        ],
-      },
-      snapshotHandler: {
-        loadRemoteSnapshotInfo: jest.fn(),
-      },
-      remoteHandler: {
-        hooks: {
-          lifecycle: {
-            generatePreloadAssets: {
-              emit: jest.fn(),
-            },
-          },
-        },
-      },
-    };
-  });
-
-  it('should log an error if id is not provided', async () => {
-    // @ts-ignore
-    await prefetch({ instance: mockInstance });
-    expect(logger.error).toHaveBeenCalledWith('id is required for prefetch!');
-  });
-
-  it('should log an error if instance is not provided', async () => {
-    // @ts-ignore
-    await prefetch({ id: 'remote1/component1' });
-    expect(logger.error).toHaveBeenCalledWith(
-      'instance is required for prefetch!',
-    );
-  });
-
-  it('should log an error if remote is not found', async () => {
-    (helpers.utils.matchRemoteWithNameAndExpose as jest.Mock).mockReturnValue(
-      undefined,
-    );
-    await prefetch({ id: 'nonexistent/component', instance: mockInstance });
-    expect(logger.error).toHaveBeenCalledWith(
-      `Can not found 'nonexistent/component' in instance.options.remotes!`,
-    );
-  });
-
-  it('should successfully prefetch data and component resources', async () => {
-    const mockRemoteInfo = {
-      remote: { name: 'remote1', alias: 'remote1_alias' },
-      expose: './component1',
-    };
-    (helpers.utils.matchRemoteWithNameAndExpose as jest.Mock).mockReturnValue(
-      mockRemoteInfo,
-    );
-    (
-      mockInstance.snapshotHandler.loadRemoteSnapshotInfo as jest.Mock
-    ).mockResolvedValue({
-      remoteSnapshot: {},
-      globalSnapshot: {},
-    });
-    (helpers.utils.getRemoteInfo as jest.Mock).mockReturnValue({});
-
-    const mockDataFetchFn = jest
-      .fn()
-      .mockResolvedValue({ data: 'prefetched data' });
-    const mockGetDataFetchGetter = jest.fn().mockResolvedValue(mockDataFetchFn);
-    const mockDataFetchMap = {
-      'remote1_alias@remote1/component1': [
-        [mockGetDataFetchGetter, 'GET', undefined],
-      ],
-    };
-    (utils.getDataFetchMap as jest.Mock).mockReturnValue(mockDataFetchMap);
-    (utils.getDataFetchInfo as jest.Mock).mockReturnValue({
-      name: 'remote1',
-      alias: 'remote1_alias',
-      id: 'remote1/component1',
-    });
-    (utils.getDataFetchMapKey as jest.Mock).mockReturnValue(
-      'remote1_alias@remote1/component1',
-    );
-
-    await prefetch({
-      id: 'remote1/component1',
-      instance: mockInstance,
-      dataFetchParams: { some: 'param', isDowngrade: false } as any,
-      preloadComponentResource: true,
-    });
-
-    expect(
-      mockInstance.remoteHandler.hooks.lifecycle.generatePreloadAssets.emit,
-    ).toHaveBeenCalled();
-
-    expect(mockGetDataFetchGetter).toHaveBeenCalled();
-    await new Promise(process.nextTick);
-    expect(mockDataFetchFn).toHaveBeenCalledWith({
-      some: 'param',
-      _id: 'remote1_alias@remote1/component1',
-      isDowngrade: false,
-    });
-  });
-
-  it('should handle cases where data fetch info is not available', async () => {
-    const mockRemoteInfo = {
-      remote: { name: 'remote1', alias: 'remote1_alias' },
-      expose: './component1',
-    };
-    (helpers.utils.matchRemoteWithNameAndExpose as jest.Mock).mockReturnValue(
-      mockRemoteInfo,
-    );
-    (
-      mockInstance.snapshotHandler.loadRemoteSnapshotInfo as jest.Mock
-    ).mockResolvedValue({
-      remoteSnapshot: {},
-      globalSnapshot: {},
-    });
-    (utils.getDataFetchMap as jest.Mock).mockReturnValue(undefined);
-
-    await prefetch({
-      id: 'remote1/component1',
-      instance: mockInstance,
-    });
-
-    expect(utils.getDataFetchInfo).not.toHaveBeenCalled();
-  });
-});

package/__tests__/router.spec.tsx

@@ -1,82 +0,0 @@
-// Test file for router
-import { render } from '@testing-library/react';
-import React from 'react';
-import {
-  Link,
-  Routes,
-  Route,
-  Outlet,
-  createBrowserRouter,
-} from 'react-router-dom';
-import { BrowserRouter, RouterProvider } from '../src/router/default';
-import { RouterContext } from '../src/provider/context';
-import { getHtml, getWindowImpl } from './util';
-
-describe('react router proxy', () => {
-  it('BrowserRouter not wraper context', async () => {
-    let { container } = render(
-      <RouterContext.Provider value={{ basename: '/test' } as any}>
-        <BrowserRouter basename="/" window={getWindowImpl('/test', false)}>
-          <ul>
-            <li>
-              <Link to="/">Home</Link>
-            </li>
-            <li>
-              <Link to="/detail">Detail</Link>
-            </li>
-          </ul>
-          <Routes>
-            <Route path="/" Component={() => <div>home page</div>} />
-            <Route path="/detail" Component={() => <div>detail page</div>} />
-          </Routes>
-        </BrowserRouter>
-      </RouterContext.Provider>,
-    );
-    expect(getHtml(container)).toMatch('home page');
-  });
-
-  it('RouterProvider', async () => {
-    function Layout() {
-      return (
-        <>
-          <ul>
-            <li>
-              <Link to="/">Home</Link>
-            </li>
-            <li>
-              <Link to="/detail">Detail</Link>
-            </li>
-          </ul>
-          <Outlet />
-        </>
-      );
-    }
-    const router = createBrowserRouter(
-      [
-        {
-          path: '/',
-          element: <Layout />,
-          children: [
-            {
-              index: true,
-              element: <div>home page</div>,
-            },
-            {
-              path: '/detail',
-              element: <div>detail page</div>,
-            },
-          ],
-        },
-      ],
-      {
-        window: getWindowImpl('/test', false),
-      },
-    );
-    let { container } = render(
-      <RouterContext.Provider value={{ basename: '/test' } as any}>
-        <RouterProvider router={router} />
-      </RouterContext.Provider>,
-    );
-    expect(getHtml(container)).toMatch('home page');
-  });
-});

package/__tests__/setupTests.ts

@@ -1,8 +0,0 @@
-// In vitest, you can use the setupFiles option in your configuration file to import any necessary setup files for your tests.
-// For example, if you want to use testing-library's custom matchers, you can import them in a setup file like this:
-import '@testing-library/jest-dom';
-
-// Fix TextEncoder/TextDecoder not defined in Node.js
-import { TextEncoder, TextDecoder } from 'util';
-global.TextEncoder = TextEncoder;
-global.TextDecoder = TextDecoder as any;

package/__tests__/util.ts

@@ -1,36 +0,0 @@
-import { JSDOM } from 'jsdom';
-import { prettyDOM } from '@testing-library/react';
-
-export async function sleep(time: number) {
-  return new Promise((resolve) => {
-    setTimeout(() => {
-      resolve(null);
-    }, time);
-  });
-}
-
-export function createContainer() {
-  const container = document.createElement('div');
-  container.setAttribute('id', 'container');
-  document.body.appendChild(container);
-
-  return {
-    clean: () => {
-      document.body.removeChild(container);
-    },
-    container,
-  };
-}
-
-export function getWindowImpl(initialUrl: string, isHash = false): Window {
-  // Need to use our own custom DOM in order to get a working history
-  const dom = new JSDOM(`<!DOCTYPE html>`, { url: 'http://localhost/' });
-  dom.window.history.replaceState(null, '', (isHash ? '#' : '') + initialUrl);
-  return dom.window as unknown as Window;
-}
-
-export function getHtml(container: HTMLElement) {
-  return prettyDOM(container, undefined, {
-    highlight: false,
-  });
-}

package/jest.config.ts

@@ -1,21 +0,0 @@
-export default {
-  displayName: 'bridge-react',
-  preset: '../../../jest.preset.js',
-  transform: {
-    '^.+\\.[tj]sx?$': [
-      'ts-jest',
-      {
-        tsconfig: '<rootDir>/tsconfig.spec.json',
-        isolatedModules: true,
-      },
-    ],
-  },
-  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
-  coverageDirectory: '../../../coverage/packages/bridge/bridge-react',
-  testEnvironment: 'jsdom',
-  setupFilesAfterEnv: ['<rootDir>/__tests__/setupTests.ts'],
-  testMatch: [
-    '<rootDir>/__tests__/**/*.spec.ts',
-    '<rootDir>/__tests__/**/*.spec.tsx',
-  ],
-};