如何在Cypress中Stub React自定义Hook useConfig的返回值？

要在Cypress中模拟@external/lib导出的useConfig Hook返回值，核心思路是通过Cypress的stub方法替换该模块的导出，让Hook返回预设的测试数据。以下是具体实现方式：

E2E测试场景示例 #

describe('App组件多平台测试', () => {
  // 测试用例1：模拟platformName为'a'
  it('渲染适配平台a的内容', () => {
    // 替换@external/lib的useConfig导出，返回预设对象
    cy.stub(require('@external/lib'), 'useConfig').returns({ platformName: 'a' })
    
    // 访问应用页面
    cy.visit('/')
    
    // 根据实际业务断言，比如验证Main组件的platformName属性或渲染的文本
    cy.get('[data-testid="main-component"]').should('have.attr', 'platformName', 'a')
    // 若组件渲染了平台名称文本，可断言：cy.contains('当前平台：a')
  })

  // 测试用例2：模拟platformName为'b'
  it('渲染适配平台b的内容', () => {
    cy.stub(require('@external/lib'), 'useConfig').returns({ platformName: 'b' })
    
    cy.visit('/')
    
    cy.get('[data-testid="main-component"]').should('have.attr', 'platformName', 'b')
  })
})

组件测试（Component Testing）场景示例 #

如果是直接测试App组件而非完整E2E流程，写法如下：

import App from './App'

describe('App组件多平台测试', () => {
  it('适配平台a的渲染逻辑', () => {
    cy.stub(require('@external/lib'), 'useConfig').returns({ platformName: 'a' })
    
    // 直接挂载组件
    cy.mount(<App />)
    
    cy.get('[data-testid="main-component"]').should('have.attr', 'platformName', 'a')
  })

  it('适配平台b的渲染逻辑', () => {
    cy.stub(require('@external/lib'), 'useConfig').returns({ platformName: 'b' })
    
    cy.mount(<App />)
    
    cy.get('[data-testid="main-component"]').should('have.attr', 'platformName', 'b')
  })
})

注意事项 #

1. 确保Cypress能正确定位到@external/lib模块，若模块路径存在别名，可在cypress.config.js中配置moduleNameMapper映射路径：

module.exports = {
  e2e: {
    // 其他配置
    moduleNameMapper: {
      '@external/lib': '<rootDir>/node_modules/@external/lib'
    }
  },
  component: {
    // 其他配置
    moduleNameMapper: {
      '@external/lib': '<rootDir>/node_modules/@external/lib'
    }
  }
}

2. useConfig是自定义Hook（本质是函数），stub时必须返回包含platformName的对象，与组件中的解构逻辑匹配。

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