如何在Cypress中Mock基于Module Federation的微前端Auth单例实例？

完全可以在Cypress中Mock这个Auth单例实例，下面提供几种实用的实现方式：

背景说明 #

我们的应用通过Webpack Module Federation加载Auth微前端，该微前端提供单例模式的Auth类，暴露getUser、isAuthenticated等方法，供所有微前端共享认证状态。需要在Cypress测试中替换这些方法的返回值，用模拟数据进行测试。

方法一：直接覆盖全局挂载的Auth实例 #

如果Auth微前端加载后会将Auth类挂载到全局对象（比如window），可以直接在Cypress中覆盖其单例获取方法：

// 在Cypress测试文件的beforeEach钩子中
beforeEach(() => {
  cy.window().then((win) => {
    // 定义Mock的Auth实例
    const mockAuth = {
      getUser: () => ({ id: 123, username: '测试用户', email: 'test@example.com' }),
      isAuthenticated: () => true,
      // 按需添加其他需要Mock的方法
    };

    // 替换Auth类的getInstance方法，直接返回Mock实例
    win.auth.services.Auth.getInstance = () => mockAuth;
  });
});

方法二：拦截Module Federation远程入口文件 #

通过cy.intercept拦截Auth微前端的remoteEntry.js，修改其中的模块导出逻辑，直接返回Mock的Auth类：

// 拦截远程入口文件并修改内容
cy.intercept('GET', 'https://localhost:3099/remoteEntry.js', (req) => {
  req.continue((res) => {
    // 替换原Auth类的导出逻辑
    res.body = res.body.replace(
      /export const Auth =[^;]+;/,
      `export const Auth = { 
        getInstance: () => ({ 
          getUser: () => ({ id: 456, name: 'Cypress测试用户' }), 
          isAuthenticated: () => true 
        }) 
      };`
    );
  });
}).as('mockAuthRemote');

// 访问页面并等待拦截完成
cy.visit('/').wait('@mockAuthRemote');

方法三：在应用代码中预留Mock入口 #

在应用初始化Auth实例的代码中添加Cypress环境判断，优先使用全局的Mock实例：

// 应用中的Auth初始化代码
import { Auth } from 'auth/services/Auth';

let authInstance;
// 检测是否处于Cypress测试环境
if (window.Cypress) {
  // 优先使用Cypress注入的mockAuth，否则用真实实例
  authInstance = window.mockAuth || Auth.getInstance();
} else {
  authInstance = Auth.getInstance();
}

// 导出供应用使用的auth实例
export const auth = authInstance;

然后在Cypress测试中提前注入Mock实例：

beforeEach(() => {
  cy.window().then((win) => {
    win.mockAuth = {
      getUser: () => ({ id: 789, name: '自定义测试用户' }),
      isAuthenticated: () => false, // 模拟未登录状态
    };
  });
  cy.visit('/');
});

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