React Testing Library测试PDF文件上传时文件显示为空的问题

我之前也踩过这个坑！Node.js环境下的File对象和浏览器里的实现差异很大，很多属性都不是可枚举的，所以你用console.log打印出来才会显示File {}，看起来像是空的，但其实文件内容是存在的，只是测试环境的File接口不完整导致的问题。

给你几个可行的解决思路：

• 使用完整的File接口polyfill
  推荐安装@web-std/file这个包，它实现了和浏览器完全一致的File、Blob接口，专门解决Node环境下的兼容性问题。
  先安装依赖：

  npm install --save-dev @web-std/file
  

  然后在你的测试文件顶部导入：

  import { File } from '@web-std/file'
  

  之后再用这个File类创建测试文件，就能和浏览器环境的行为保持一致，userEvent.upload也能正确识别文件内容了。

• 手动修复File对象的可枚举属性（临时方案）
  如果不想额外加依赖，可以手动给创建的File对象添加Symbol.toStringTag，让console能正确识别它的类型，同时确保测试工具能读取到必要属性：

  const file = new File(['hello'], 'hello.pdf', {type: 'application/pdf'})
  // 手动添加toStringTag，让console正确显示
  Object.defineProperty(file, Symbol.toStringTag, { value: 'File' })
  // 可以验证下内容是否存在
  console.log(file.name, file.size, await file.text()) // 应该能输出hello.pdf、5、hello
  

  不过这个方案只能解决打印显示的问题，部分复杂的上传组件可能还是会因为属性缺失出问题，所以更推荐用polyfill。

• 更新userEvent到最新版本
  旧版本的@testing-library/user-event对Node环境的File支持可能不够完善，更新到最新版本说不定能直接解决问题：

  npm install --save-dev @testing-library/user-event@latest
  

另外你提到用Blob代替File后报错，这是因为大部分上传组件都会期望接收File类型（包含name、type等元数据），而Blob没有这些属性，所以组件会抛出错误，还是得用完整的File对象来测试。

备注：内容来源于stack exchange，提问作者Artem Marochko