如何使用Jest测试Axios上传本地模拟JSON文件？

当然可行！你遇到的问题大概率出在JSON文件导入配置或者上传数据的格式不符合文件上传要求这两个点上，下面一步步帮你解决：

1. 先搞定JSON文件的导入问题 #

你尝试的两种导入方式本身没问题，但可能是项目配置（尤其是TypeScript项目）限制了JSON导入：

对于JavaScript项目 #

直接用ES模块语法导入即可：

import jsonFileMock from "../__mocks__/jsonFileMock.json";

或者CommonJS风格：

const jsonFileMock = require("../__mocks__/jsonFileMock.json");

对于TypeScript项目 #

需要在tsconfig.json里开启两个配置项，不然TypeScript会报错无法识别JSON模块：

{
  "compilerOptions": {
    "resolveJsonModule": true,
    "esModuleInterop": true
  }
}

配置完成后，就能像JS项目一样正常导入JSON文件了。

2. 关键：把JSON包装成文件上传格式 #

你直接把JSON对象传给上传方法肯定不行——因为文件上传接口通常接收的是FormData格式（而非纯JSON）。你需要把模拟的JSON数据转换成File或Blob对象，再塞进FormData里：

// 1. 把JSON对象转成Blob（模拟文件内容）
const jsonBlob = new Blob([JSON.stringify(jsonFileMock)], { 
  type: 'application/json' 
});

// 2. 包装成File对象，模拟真实上传的文件（文件名可自定义）
const mockJsonFile = new File([jsonBlob], 'mock-data.json', { 
  type: 'application/json' 
});

// 3. 构建FormData，把文件加进去（字段名要和后端接口要求一致，比如这里用'file'）
const formData = new FormData();
formData.append('file', mockJsonFile);

// 4. 现在再调用上传方法就没问题了
const apiResponse = await someApiUpload(formData);

3. Jest里的完整测试示例 #

如果需要模拟Axios的请求行为（避免真实调用接口），可以用Jest的mock功能：

import axios from 'axios';
import someApiUpload from './your-upload-module';

// 模拟Axios模块
jest.mock('axios');

describe('someApiUpload', () => {
  it('should upload mock JSON file successfully', async () => {
    // 预设Axios的POST响应
    (axios.post as jest.Mock).mockResolvedValue({ 
      data: { status: 'success', message: '文件上传完成' } 
    });

    // 导入模拟的JSON数据
    import jsonFileMock from "../__mocks__/jsonFileMock.json";
    
    // 构建模拟文件和FormData
    const jsonBlob = new Blob([JSON.stringify(jsonFileMock)], { type: 'application/json' });
    const mockJsonFile = new File([jsonBlob], 'mock-data.json', { type: 'application/json' });
    const formData = new FormData();
    formData.append('file', mockJsonFile);

    // 执行上传方法
    const response = await someApiUpload(formData);

    // 验证请求是否符合预期
    expect(axios.post).toHaveBeenCalledWith(
      '/your-upload-api-endpoint', // 替换成你的接口地址
      formData,
      { headers: { 'Content-Type': 'multipart/form-data' } } // 上传文件必须的请求头
    );
    expect(response.data.status).toBe('success');
  });
});

排查小Tips #

• 检查JSON文件的路径是否正确：比如../__mocks__/jsonFileMock.json是否真的对应项目中的位置
• 确认someApiUpload方法内部是否正确处理了FormData，有没有设置multipart/form-data请求头

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