如何在Cypress中测试react-date-picker组件，模拟选择指定出生日期的操作

Cypress 测试 react-date-picker 组件方案 #

你可以根据测试需求选择以下两种方案实现日期选择：

方案1：直接赋值（高效验证业务逻辑） #

如果你的测试重点是表单校验、提交等业务逻辑，不需要验证第三方日期组件本身的交互功能，可以直接调用组件的onChange方法赋值，执行效率更高：

// JS中月份从0开始计数，2000年5月1日对应月份参数为4
const targetDob = new Date(2000, 4, 1)
// 定位DatePicker组件，触发onChange完成赋值
cy.get('.react-date-picker')
  .invoke('props', 'onChange')
  .call(targetDob)

// 可选：验证赋值结果符合预期
cy.get('.react-date-picker input').should('have.value', '2000-05-01')

方案2：模拟用户全流程点击操作 #

如果需要完全复现用户点击日历图标、选择日期的操作流程，可以按以下步骤实现：

// 1. 点击日历图标展开选择面板
cy.get('.react-date-picker__button').click()

// 2. 切换年份到2000
cy.get('.react-calendar__navigation__label').click()
cy.contains('.react-calendar__decade-view__years__year', '2000').click()

// 3. 切换月份到5月，组件显示英文的话把'五月'替换为'May'
cy.contains('.react-calendar__year-view__months__month', '五月').click()

// 4. 选择1号日期
cy.contains('.react-calendar__month-view__days__day', '1').click()

// 验证选择结果正确
cy.get('.react-date-picker input').should('have.value', '2000-05-01')

提示：如果项目自定义过组件类名，建议给<DatePicker>添加data-testid="dob-picker"属性，用cy.get('[data-testid="dob-picker"]')定位，稳定性更高，不会受样式修改影响。

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