Cypress模拟模块联邦微型前端

Question

我的应用程序有一个auth微前端，它创建了一个用于与应用程序中的所有微前端共享auth状态的单例实例。

auth类公开了一些方法，如

{
    getUser: () => {...} 
    isAuthenticated: () => true
    ...
}

在我加载到MF中的应用程序中，获取实例，并调用我需要的方法。

import { Auth } from 'auth/services/Auth';

const auth = Auth.getInstance();

const component = () => {
    const isAuthenticated = auth.isAuthenticated();
    ...
}

我使用webpack模块联邦在运行时加载MF。

    plugins: [
        new ModuleFederationPlugin({
            name: 'mf',
            remotes: {
                auth: 'auth@https://localhost:3099/remoteEntry.js',
                ...
            },
        }),
    ],

有什么办法可以在Cypress中嘲弄auth实例吗？我想将使用模拟数据公开的方法称为auth实例。

Answer 1

不是为某些工具做广告，但为此，我将使用Mockoon记录和模拟身份验证部分。

Answer 2

模拟应用程序内部的一种方法是公开一个供测试修改的引用。

import { Auth } from 'auth/services/Auth';

const auth = Auth.getInstance();

if (window.Cypress) {
  window.auth
}

const component = () => {
    const isAuthenticated = auth.isAuthenticated();
    ...
}

测试

cy.visit('/', {
  onBeforeLoad: (win) => {
    cy.stub(win.auth, 'isAuthenticated').returns(true)
  },
})