如何在React Testing Library中模拟向FilePond添加文件？

问题背景 #

我需要为MyComponent中的自定义函数foo编写单元测试，该函数在FilePond组件的onupdatefiles匿名回调中被调用。但测试环境下FilePond的渲染结构比浏览器中精简很多，尝试了userEvent.upload()、fireEvent.drop()等方法，也试过添加等待时间、调整act()和async/await写法，都无法成功触发文件上传流程以调用foo。

解决方案 #

1. 直接测试foo函数（最简洁高效） #

如果foo是纯逻辑函数（仅依赖输入参数处理数据），可以将其单独提取出来，直接测试其逻辑，无需依赖FilePond的交互。

修改组件代码：将foo导出，方便测试调用

// MyComponent.js
export function foo(encodedFiles) {
  // 原逻辑代码
}

function MyComponent(props) {
  // ... 其他代码
}

测试代码：

import { foo } from '../MyComponent';

describe('foo function', () => {
  it('processes encoded files correctly', () => {
    const mockEncodedFiles = ['data:image/png;base64,...', 'data:image/jpeg;base64,...'];
    const result = foo(mockEncodedFiles);
    
    // 断言处理结果符合预期
    expect(result).toEqual(/* 预期输出 */);
  });
});

2. 模拟触发onupdatefiles回调（绕过真实上传） #

如果需要验证onupdatefiles回调与foo的关联，可以直接模拟触发该回调，无需真实上传文件。

测试代码：

import React from 'react';
import { render } from '@testing-library/react';
import MyComponent from '../MyComponent';

// 模拟FilePond的fileItem对象
const mockFileItems = [
  { getFileEncodeDataURL: () => 'data:image/png;base64,test1' },
  { getFileEncodeDataURL: () => 'data:image/png;base64,test2' }
];

describe('MyComponent', () => {
  it('calls foo when onupdatefiles is triggered', () => {
    // 导出foo后直接mock
    jest.mock('../MyComponent', () => ({
      ...jest.requireActual('../MyComponent'),
      foo: jest.fn()
    }));
    const { foo } = require('../MyComponent');

    const { container } = render(<MyComponent files={[]} />);
    // 获取FilePond组件的props并触发回调
    const filePondInput = container.querySelector('[name="files"]').closest('.filepond--wrapper')._internalInstance.memoizedProps;
    filePondInput.onupdatefiles(mockFileItems);

    // 断言foo被调用，且参数正确
    expect(foo).toHaveBeenCalledWith(['data:image/png;base64,test1', 'data:image/png;base64,test2']);
  });
});

3. 正确模拟文件上传（若需验证完整交互） #

如果一定要测试真实的文件上传交互，需要确保找到正确的FilePond文件输入框，并正确触发上传：

修正后的测试代码：

import React from 'react';
import { render, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import MyComponent from '../MyComponent';

describe('MyComponent file upload', () => {
  it('triggers foo after file upload', async () => {
    // 导出foo后mock
    jest.mock('../MyComponent', () => ({
      ...jest.requireActual('../MyComponent'),
      foo: jest.fn()
    }));
    const { foo } = require('../MyComponent');

    const { container } = render(<MyComponent files={[]} />);
    
    // 找到FilePond对应的底层file input
    const fileInput = container.querySelector('input[type="file"][name="files"]');
    const testFile = new File(['test content'], 'test.png', { type: 'image/png' });

    // 直接使用userEvent.upload上传文件
    await userEvent.upload(fileInput, testFile);

    // 等待FilePond处理文件并触发回调
    await waitFor(() => {
      expect(foo).toHaveBeenCalled();
    });
  });
});

关键注意事项 #

• 测试环境中FilePond仅渲染核心的file input元素，无需模拟拖拽或点击可视化区域，直接操作底层input即可。
• 确保MyComponent的files props初始化为空数组，避免初始文件干扰测试。
• 若需要断言foo的调用情况，必须确保foo的作用域可被测试代码访问（导出为独立函数是最简单的方式）。

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