React中无法为文件上传onChange事件编写Jest测试用例求助

我是测试用例编写新手，想给React中文件上传的onChange事件写测试用例，查了资料还是没解决。以下是我的相关代码：

组件代码 #

<div className="App">
  <h1>Hello CodeSandbox</h1>
  <h2>Start editing to see some magic happen!</h2>
  <div
    className={`dropzone ${isDragging ? "dragging" : ""}`}
    onDragEnter={handleDragEnter}
    onDragLeave={handleDragLeave}
    onDragOver={handleDragOver}
    onDrop={handleDrop}
  >
    <input
      type="file"
      id="input-file-upload"
      className="inputFile"
      data-testid="input-field"
      onChange={handleFileInputChange}
    />
    <label htmlFor="input-file-upload" id="label-file-upload">
      <div>
        <button
          style={{ display: "block", margin: "auto" }}
          onClick={handleButtonClick}
        >
          Add File
        </button>
        {selectedFile ? (
          <p>Selected File: {selectedFile.name}</p>
        ) : (
          <p>Drag and drop files</p>
        )}
      </div>
    </label>
  </div>
</div>

onChange事件处理函数 #

const handleFileInputChange = (e) => {
    const file = e.target.files[0];
    setSelectedFile(file);
    console.log(file);
};

当前测试用例 #

test.only("input field onChange", () => {
  render(<App />);
  expect(screen.getByTestId("input-field")).toBeInTheDocument();
});

我现在没法覆盖onChange事件，而且这个input元素是不可见的，不知道该怎么操作。

解决方案 #

1. 定位隐藏input元素：即便input被CSS隐藏，依然可以通过data-testid定位到它（因为它存在于DOM中）。
2. 模拟文件上传事件：使用fireEvent.change触发input的onChange事件，同时传入模拟的File对象。

修改后的测试用例如下：

import { render, screen, fireEvent } from '@testing-library/react';
import App from '../App';

test("input field onChange handles file selection", () => {
  render(<App />);
  // 获取目标input元素
  const input = screen.getByTestId("input-field");
  // 创建模拟测试文件
  const testFile = new File(["test content"], "test-file.txt", { type: "text/plain" });
  
  // 触发input的onChange事件
  fireEvent.change(input, {
    target: {
      files: [testFile]
    }
  });
  
  // 验证文件选择状态：检查页面是否显示选中的文件名
  expect(screen.getByText(/Selected File: test-file.txt/i)).toBeInTheDocument();
});

关键说明 #

• 用File构造函数生成模拟文件，可自定义文件内容、名称和类型。
• 通过fireEvent.change传递模拟的文件数组，让handleFileInputChange能正确获取到文件对象。
• 最后通过验证页面上的文件名展示，确认组件状态已更新，证明onChange事件被正确处理。

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