JavaScript 中怎么 Mock 微前端主应用下发的全局状态-js教程-PHP中文网

微前端测试需mock主应用注入的运行时上下文，核心是控制注入时机、隔离副作用、保证可复位；常见方式包括mock全局变量（如window.__micro_app_env__）、自定义事件（如micro-app-state）、全局工具函数（用jest.spyon或直接赋值），以及通过props传入状态以解耦测试。

javascript 中怎么 mock 微前端主应用下发的全局状态

在微前端架构中，主应用通常会通过全局变量、自定义事件、状态管理库（如 Redux/Vuex）或 window 上挂载的对象等方式向子应用注入运行时上下文（如用户信息、主题、路由权限等）。测试子应用时，若依赖这些外部状态，就需要 Mock 主应用下发的全局状态。关键在于：**控制注入时机、隔离副作用、保证可复位**。

直接挂载到 window 的对象（最常见）

很多主应用会把状态写在 window.__MICRO_APP_ENV__ 或 window.microApp 等全局属性上。Mock 方式简单直接：

在 Jest / Vitest 测试用例前，手动赋值：window.__MICRO_APP_ENV__ = { user: { id: 123, name: 'test' }, theme: 'dark' };
测试结束后清理（避免污染其他用例）：delete window.__MICRO_APP_ENV__; 或重置为 {}
若子应用在初始化时读取该对象（如 useEffect(() => { const env = window.__MICRO_APP_ENV__; ... }, [])），需确保 Mock 在组件挂载前完成 —— 可用 beforeEach 统一处理

通过自定义事件通信（如 micro-app 框架）

以 [micro-app](https://github.com/micro-zoe/micro-app) 为例，主应用通过 dispatchEvent(new CustomEvent('micro-app-state', { detail })) 下发状态。子应用监听该事件获取数据。

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

Mock 方法：在测试中手动触发该事件：window.dispatchEvent(new CustomEvent('micro-app-state', { detail: { token: 'mock-token', permissions: ['read'] } }));
注意：子应用监听逻辑可能在 useEffect 中注册，需确保事件在监听器就绪后触发；可用 await waitFor(() => expect(...).toBe(...)) 配合异步断言
建议封装一个 mockMicroAppState(state) 工具函数，统一处理 dispatch 和 cleanup

依赖主应用注入的全局工具函数或 SDK 实例

例如主应用挂载了 window.$utils.getUser() 或 window.apiClient.get('/user')。这类行为不能只 Mock 数据，还需 Mock 函数本身。

用 jest.mock 不适用（因为不是模块导出），改用 jest.spyOn(window, '$utils').mockImplementation(...)
更稳妥方式：在测试前定义并覆盖：window.$utils = { getUser: jest.fn().mockReturnValue({ id: 999 }) };
务必在 afterEach 中恢复原函数（如果存在）或删除属性：delete window.$utils;