使用Cypress + react-query测试React组件：API响应Mock方法咨询

当然可以用Cypress的cy.intercept()来Mock API响应，不管是组件初始化时获取数据的请求，还是useMutation触发的变更请求，都能轻松拦截并返回预设数据，解决测试时页面不渲染复选框的问题。

核心思路 #

1. 拦截初始化数据请求：Mock获取复选框列表的API，让组件能拿到数据渲染出复选框。
2. 拦截useMutation请求：Mock变更状态的API，模拟请求成功/失败的场景，验证组件交互逻辑。

具体测试示例（对应你的场景） #

假设你的组件逻辑是：加载时从/api/checklist获取复选框数据，勾选复选框后通过useMutation调用/api/update-checklist更新状态，按钮在复选框勾选后启用。

describe('复选框与提交按钮交互测试', () => {
  beforeEach(() => {
    // 1. Mock获取复选框列表的GET请求
    cy.intercept('GET', '/api/checklist', {
      statusCode: 200,
      body: [
        { id: 1, label: '同意服务条款', checked: false },
        { id: 2, label: '确认个人信息', checked: false }
      ]
    }).as('fetchChecklist');

    // 2. Mock useMutation触发的POST请求
    cy.intercept('POST', '/api/update-checklist', {
      statusCode: 200,
      body: { success: true, checked: true }
    }).as('updateCheckStatus');

    // 访问组件页面
    cy.visit('/your-component-path');
    // 等待数据请求完成，确保复选框渲染
    cy.wait('@fetchChecklist');
  });

  it('勾选复选框后提交按钮启用', () => {
    // 验证复选框已渲染
    cy.get('[data-testid="check-item-1"]').should('be.visible');
    
    // 勾选第一个复选框
    cy.get('[data-testid="check-item-1"]').check();
    
    // 等待mutation请求完成（如果勾选后立即触发请求）
    cy.wait('@updateCheckStatus');
    
    // 验证按钮从禁用变为启用
    cy.get('[data-testid="submit-btn"]').should('not.be.disabled');
  });
});

关键注意点 #

• 稳定选择器：给复选框、按钮加上data-testid属性，避免依赖CSS类或文本内容，测试更可靠。
• 灵活Mock响应：如果要测试异常场景，比如API请求失败，只需修改cy.intercept的statusCode为400或500，再验证按钮是否保持禁用。
• 等待请求完成：用cy.wait('@alias')确保API请求处理完成后再进行断言，避免因异步导致的断言失败。

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