Cypress UI测试中MSW Mock数据加载不一致问题求助

问题根源 #

你的问题核心是时序不匹配：

• cy.visit 触发页面加载后，应用会立即发起API请求，但此时你的MSW Mock还未完成注册（cy.window().then 是异步命令，需要等待Cypress命令队列执行到这一步才会注册Mock）。
• 打开开发者工具时，页面加载速度变慢，Mock有足够时间完成注册，因此请求能被正确拦截。

可行解决方案 #

方案1：改用Cypress原生cy.intercept替代MSW（推荐）

Cypress的cy.intercept在网络层拦截请求，时序控制更可靠，无需依赖应用内的MSW实例：

1. 修改mock-function.ts中的命令：

Cypress.Commands.add('mockTestMock', () => {
  cy.intercept('POST', 'apiUrl', {
    delay: 1000,
    body: { text: "this text comes from api" }
  }).as('testApiCall'); // 给请求打标，方便后续等待
});

2. 调整测试流程，先注册拦截再访问页面，确保请求被拦截：

describe('Example mock test case ', () => {
  beforeEach(() => {
    cy.mockTestMock(); // 先注册拦截规则
    cy.visit('/?planNumber=123456');
    cy.wait('@testApiCall'); // 等待API请求完成，再执行断言
  });
  
  it('Get a valid text from api', () => {
    cy.get('#mockDataText').should('have.text', 'this text comes from api');
  });
})

方案2：修正MSW Mock的注册时序

如果必须复用应用内的MSW实例，需要确保Mock在页面发起请求前完成注册：

1. 优化mockTestMock命令，确保注册完成后再继续：

Cypress.Commands.add('mockTestMock', () => {
  return cy.window().then((window) => {
    const { worker, rest } = window.msw;
  
    Cypress.log({
      displayName: 'Example mock',
      message: [],
    });
  
    // worker.use返回Promise，需等待其完成
    return worker.use(
      rest.post(
        'apiUrl',
        async (req, res, ctx) => {
          return res(
            ctx.delay(1000),
            ctx.json({text:"this text comes from api"}),
          );
        },
      ),
    );
  }).then(() => {
    Cypress.log({
      displayName: 'Mock registered',
      message: [],
    });
  });
});

2. 在beforeEach中先注册Mock，再刷新页面确保Mock生效：

describe('Example mock test case ', () => {
  beforeEach(() => {
    cy.visit('/?planNumber=123456');
    cy.mockTestMock().then(() => {
      cy.reload(); // 刷新页面，此时Mock已注册，请求会被拦截
    });
  });
  
  it('Get a valid text from api', () => {
    cy.get('#mockDataText').should('have.text', 'this text comes from api');
  });
})

调试技巧 #

• 打开Cypress测试的Network面板，查看请求的响应来源：如果响应不是来自MSW，说明Mock注册晚于请求发起。
• 在应用的API请求代码中添加console.log('API请求发起')，在测试的mockTestMock中添加console.log('Mock注册完成')，对比两者的执行顺序。
• 使用cy.log()标记关键步骤，在Cypress测试日志中跟踪命令执行顺序。

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