使用Cypress-File-Upload测试React-Dropzone上传功能遇阻求助

问题分析 #

你的测试代码存在几个关键问题，导致onDrop未被正确触发：

• 重复触发change事件：attachFile方法本身就会模拟文件上传并触发对应事件，额外调用trigger('change')会造成干扰
• Fixture处理缺失：使用base64格式读取fixture后，未指定文件的mimeType，react-dropzone可能无法识别为有效图片文件
• 代码语法错误：测试代码存在冗余的闭合括号，可能导致逻辑执行异常

修正后的测试代码 #

// 先确保在cypress/support/index.js中导入cypress-file-upload命令
// import 'cypress-file-upload';

cy.fixture('avatar.png', 'base64').then(fileContent => {
  cy.get('[data-cy="uploadFile"]').attachFile({
    fileContent,
    fileName: 'avatar.png',
    mimeType: 'image/png' // 必须指定正确的图片MIME类型
  });
});

// 替换为你的模态框选择器，验证模态框是否弹出
cy.get('[data-cy="avatar-modal"]').should('be.visible');

组件侧的注意事项 #

1. 修正onDrop的参数接收逻辑（react-dropzone的onDrop第一个参数是文件数组，不是event）：

function onDrop(files) {
  const file = files[0];
  if (file) { // 先判断文件存在再执行后续逻辑
    openModal(); // 确保openModal是正确的模态框触发函数
  }
}

2. 确认react-dropzone的noDrag配置生效，此时组件仅响应点击上传行为

额外检查点 #

• 确认cypress-file-upload版本与当前Cypress版本兼容
• 检查测试环境中react-dropzone组件渲染正常，无控制台报错

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