如何使用Jest测试Vue组件中调用FileReader读取JSON文件的方法

核心思路是手动Mock全局FileReaderAPI，完全控制文件读取的返回结果，跳过真实的文件读取逻辑，直接验证方法的处理逻辑是否正确。

步骤1：Mock FileReader 实现 #

在测试用例中重写全局FileReader，让它的readAsText方法被调用时，直接触发我们预设好内容的onload事件：

// 预设测试用的JSON配置内容
const mockConfigContent = JSON.stringify({
  connection: {
    type: 'rest',
    url: 'https://example.com/api',
    api: '/getList',
    time: 10000
  },
  table: {
    headers: ['姓名', '年龄', '性别'],
    keys: ['name', 'age', 'gender'],
    rules: [{ required: true, message: '必填' }]
  }
})

// Mock FileReader
global.FileReader = jest.fn(() => ({
  readAsText: jest.fn(function () {
    // 手动触发onload事件，传入模拟的读取结果
    this.onload({
      target: { result: mockConfigContent }
    })
  }),
  onload: null
}))

步骤2：构造模拟的文件上传事件 #

模拟input触发change事件时的参数结构，包含选中的JSON文件对象：

// 构造模拟的File对象
const mockFile = new File([mockConfigContent], 'test-config.json', { type: 'application/json' })
// 构造change事件参数
const mockEvent = {
  target: {
    files: {
      item: () => mockFile
    }
  }
}

步骤3：执行测试验证结果 #

触发readConfig方法，验证组件内的config属性是否被正确赋值：

import { mount } from '@vue/test-utils'
import YourComponent from './YourComponent.vue'

test('should parse JSON config correctly when upload file', () => {
  // 挂载组件，addElement方法如果有外部依赖可直接mock避免报错
  const wrapper = mount(YourComponent, {
    methods: {
      addElement: jest.fn()
    }
  })

  // 调用readConfig方法，传入模拟的事件
  wrapper.vm.readConfig(mockEvent)

  // 验证配置是否正确赋值
  expect(wrapper.vm.config.connectionType).toBe('rest')
  expect(wrapper.vm.config.url).toBe('https://example.com/api')
  expect(wrapper.vm.config.api).toBe('/getList')
  expect(wrapper.vm.config.time).toBe(10000)
  expect(wrapper.vm.config.headers).toEqual(['姓名', '年龄', '性别'])
  expect(wrapper.vm.config.keys).toEqual(['name', 'age', 'gender'])
  expect(wrapper.vm.config.rules).toEqual([{ required: true, message: '必填' }])
  // 验证addElement调用次数和表头长度一致
  expect(wrapper.vm.addElement).toHaveBeenCalledTimes(3)
})

补充：模拟真实用户上传流程 #

如果需要模拟用户点击选择文件的完整交互，也可以直接触发input元素的change事件：

const input = wrapper.find('input[type="file"]')
input.element.files = [mockFile]
await input.trigger('change')
// 后续验证逻辑和上述一致

如果要测试socket类型的配置，只需要修改mockConfigContent里的connection.type为socket，验证config.socket是否被正确赋值即可。

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