Vitest无法加载模块联邦配置的remoteEntry.js如何解决？

测试环境下不会启动远程微前端服务，因此需要Mock联邦模块的导入逻辑，以下是三种可行方案：

方法1：单个测试文件中Mock远程模块导入 #

仅需在用到远程组件的测试文件中，用Vitest的vi.mock方法Mock指定导出：

假设宿主应用代码中导入远程组件：

import { Button } from 'ui/Button';

对应的测试文件添加Mock：

import { vi } from 'vitest';
import { render, screen } from '@testing-library/react';
import YourHostComponent from './YourHostComponent';

// Mock远程Button组件
vi.mock('ui/Button', () => ({
  Button: () => <button data-testid="mock-ui-button">Mocked UI Button</button>,
}));

test('宿主组件能正确渲染Mock的远程按钮', () => {
  render(<YourHostComponent />);
  expect(screen.getByTestId('mock-ui-button')).toBeInTheDocument();
});

方法2：全局Mock远程模块（多测试文件场景） #

通过Vitest全局setup文件统一配置Mock，避免重复代码：

1. 配置Vitest使用setup文件
   修改vitest.config.js，指定全局setup文件路径：

export default defineConfig({
  test: {
    setupFiles: ['./vitest.setup.js'],
    environment: 'jsdom' // 确保使用浏览器环境测试React组件
  },
});

2. 编写全局Mock逻辑
   创建vitest.setup.js文件，统一Mock所有需要的远程模块导出：

import { vi } from 'vitest';
import React from 'react';

// Mock整个远程模块的所有导出
vi.mock('ui', () => ({
  Button: () => <button data-testid="mock-ui-button">Mocked Button</button>,
  Card: () => <div data-testid="mock-ui-card">Mocked Card</div>,
  // 按需添加其他需要Mock的组件或方法
}));

// 针对动态导入（React.lazy加载）的模块单独Mock
vi.mock('ui/Modal', async () => ({
  default: () => <div data-testid="mock-ui-modal">Mocked Modal</div>,
}));

方法3：Vite条件配置替换远程模块为本地Mock #

测试环境下通过Vite路径别名，直接将远程模块导入指向本地Mock文件，绕过Module Federation远程加载逻辑：

1. 修改Vite配置文件
   更新vite.config.js，根据环境切换配置：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import federation from '@originjs/vite-plugin-federation';

export default defineConfig(({ mode }) => {
  const isTest = mode === 'test';

  return {
    plugins: [
      react(),
      // 测试环境下禁用Module Federation插件
      !isTest && federation({
        name: 'host',
        remotes: {
          'ui': 'http://localhost:3201/assets/remoteEntry.js',
        },
        shared: ['react', 'react-dom', 'react-router-dom'],
      }),
    ].filter(Boolean),
    resolve: {
      alias: isTest ? {
        // 映射远程模块路径到本地Mock文件
        'ui': '/src/mocks/uiMock.js',
        'ui/Button': '/src/mocks/ButtonMock.js',
      } : {},
    },
  };
});

2. 创建本地Mock文件
   在src/mocks目录下创建uiMock.js，保持与远程模块一致的导出结构：

import React from 'react';

export const Button = () => <button data-testid="mock-ui-button">Mocked UI Button</button>;
export const Card = () => <div data-testid="mock-ui-card">Mocked UI Card</div>;

注意事项 #

• 若使用React.lazy和Suspense加载远程组件，测试时需用waitFor等待Mock组件渲染完成
• Mock组件的导出结构需与远程模块完全匹配，避免导入错误

内容的提问来源于stack exchange，提问作者xzegga