如何在Jest和Testing Library中测试删除已上传文件功能

问题原因 #

userEvent.clear() 仅适配可编辑文本类表单控件，type="file" 类型的输入框files属性为原生只读属性，无法通过常规clear操作修改。

可用解决方案 #

• 方法1：使用userEvent.upload传入空数组模拟清空，这是最贴近用户真实操作的方案，替换原有的clear逻辑即可

  // 注意v14+版本的userEvent需要加await
  await userEvent.upload(input, []);
  expect(input.files).toHaveLength(0); // 断言正常通过
  

• 方法2：手动修改files属性实现清空，适合需要底层模拟的场景

  // 构造空FileList赋值给input的files属性
  Object.defineProperty(input, 'files', {
    value: new DataTransfer().files
  });
  expect(input.files).toHaveLength(0);
  

• 方法3：如果测试的组件自带删除文件交互，直接触发对应操作即可，无需手动操作input元素

  // 示例：模拟点击组件自带的删除按钮
  await userEvent.click(screen.getByRole('button', {name: '删除文件'}));
  expect(input.files).toHaveLength(0);
  

注意：如果你使用的是@testing-library/user-event v14及以上版本，所有交互方法均为异步，必须添加await修饰，否则会出现断言早于交互执行导致的异常。

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