Jest中如何对type为file的input组件的值进行单元测试？

报错原因 #

浏览器出于安全策略限制，type="file"的input组件的value属性仅允许被编程赋值为空字符串，你测试代码中直接为file.value赋值myfile.png的操作触发了该限制，才会抛出InvalidStateError报错。

正确测试方案 #

测试核心思路是模拟用户真实选择文件的交互行为：构造File对象，通过触发input的change事件模拟文件选择操作，再从input.files属性中读取选中的文件信息做断言。
以下是基于React Testing Library的可运行测试代码：

import { screen, fireEvent } from '@testing-library/react'

describe('file input validation', () => {
  test('should accept png/jpg/jpeg format file', () => {
    const fileInput = screen.getByTestId('file')
    // 构造测试用的图片文件
    const validImageFile = new File(['dummy content'], 'myfile.png', { type: 'image/png' })
    
    // 模拟用户选择文件的操作
    fireEvent.change(fileInput, {
      target: { files: [validImageFile] }
    })

    // 断言选中的文件符合格式要求
    expect(fileInput.files[0].name).toMatch(/(\.jpg|\.jpeg|\.png)$/i)
    // 额外可以断言input的accept属性配置正确
    expect(fileInput).toHaveAttribute('accept', '.jpg, .jpeg, .png')
  })
})

注意事项 #

• 所有文件相关的取值都需要从input.files数组中获取，不要直接操作input.value属性
• 你可以构造不同后缀的File对象，测试合法/非法格式文件的校验逻辑是否符合预期
• 如果使用其他测试框架，只要遵循「构造File对象 → 触发change事件传递文件 → 从files属性读取做断言」的逻辑即可通用

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