React/Jest/React-Testing-Library创建PDF File对象失败求助

针对你遇到的Blob转File后数据丢失、触发MIME错误的问题，提供几个可行的解决思路：

方案1：改用ArrayBuffer构建File对象 #

在Jest的jsdom环境中，直接将Blob传入File构造器可能存在兼容性问题，换成从ArrayBuffer构建File能避免数据丢失：

fetch(examplePDFurl)
  .then(response => response.arrayBuffer())
  .then(buffer => {
    // 直接用ArrayBuffer创建File，指定正确的MIME类型
    const file = new File([buffer], 'test.pdf', {
      type: 'application/pdf',
      lastModified: Date.now()
    });
    return FileUploadService.upload(file);
  })
  .then(data => {
    // 后续处理逻辑
  })
  .catch(err => console.error(err));

方案2：测试环境直接Mock File对象 #

测试阶段没必要依赖真实的PDF请求，直接构造符合要求的File对象即可，既高效又避免环境兼容问题：

// 模拟PDF的二进制数据（大小和真实一致）
const mockPdfData = new Uint8Array(66378);
// 直接创建File对象
const mockFile = new File([mockPdfData], 'test.pdf', {
  type: 'application/pdf',
  lastModified: Date.now()
});

// 调用上传服务
FileUploadService.upload(mockFile)
  .then(data => {
    // 后续处理逻辑
  });

方案3：修复Jest环境的Blob/FormData兼容性 #

如果必须使用真实Blob，确保环境的polyfill配置正确：

1. 安装依赖：

npm install blob-polyfill formdata-polyfill --save-dev

2. 在setupTests.ts中导入：

import 'blob-polyfill';
import 'formdata-polyfill';

3. 确保jest.config.js的配置正确：

module.exports = {
  testEnvironment: 'jsdom',
  setupFilesAfterEnv: ['<rootDir>/src/setupTests.ts'],
  // 其他现有配置
};

问题根源说明 #

Jest默认的jsdom环境对Blob的处理存在局限性，将Blob作为参数传入File构造器时，可能没有正确读取Blob的二进制内容，导致生成的File仅保留了元数据（13字节大概率是Blob的描述信息而非真实内容），改用ArrayBuffer或直接Mock能绕过这个问题。

内容的提问来源于stack exchange，提问作者Miłosz