如何在Mock Axios响应中返回文件？Vue组件单元测试问题

Jest默认仅支持解析JavaScript/TypeScript文件，直接导入PDF这类二进制文件会触发解析失败，你可以通过以下几种方式解决：

方法一：直接Mock Blob内容（最简单） #

单元测试无需依赖真实PDF文件内容，只需模拟出符合结构的Blob对象即可，省去文件导入步骤：

export const getDocumentBlob = {
  data: {
    // 用任意二进制数据模拟PDF内容
    file: new Blob([Buffer.from('mock-pdf-content')], { type: 'application/pdf' }),
  },
  status: 200,
  statusText: 'OK',
  headers: {},
  config: {},
};

方法二：配置Jest的文件Mock规则 #

如果需要保留导入文件的写法，可给Jest配置文件映射，让它把PDF文件解析为模拟值：

1. 在项目根目录创建__mocks__/fileMock.js文件，内容如下：

// 导出模拟的文件内容，字符串或Buffer格式均可
module.exports = Buffer.from('mock-pdf-data');

2. 在jest.config.js（或package.json的jest字段）中添加模块映射规则：

module.exports = {
  // 其他Jest配置...
  moduleNameMapper: {
    '\\.(pdf)$': '<rootDir>/__mocks__/fileMock.js'
  }
};

配置完成后，你原本的import代码就能正常运行，testPdf会被替换为mock文件里的内容。

方法三：使用jest-transform-stub转换器 #

通过第三方转换器处理非JS文件：

1. 安装依赖：

npm install jest-transform-stub --save-dev

2. 在jest.config.js中配置transform规则：

module.exports = {
  // 其他Jest配置...
  transform: {
    '\\.(pdf)$': 'jest-transform-stub'
  }
};

该转换器会将PDF文件转换为可导出的模块，导入后的值可直接用于创建Blob。

内容的提问来源于stack exchange，提问作者Ricardo de Vries