如何使用 ReactTestUtils 设置 HTML5 文件类型输入答案

【问题标题】：How to set HTML5 file type input with ReactTestUtils如何使用 ReactTestUtils 设置 HTML5 文件类型输入
【发布时间】：2016-07-13 15:50:00
【问题描述】：

我有一个类似于下面的 React 表单的 HTML5 文件类型输入

<input type='file' ref='fileInput' onChange={this.onChange} multiple/>

上传文件后，this.onChange 会访问选定的文件、验证它们并转换表单。

我试图弄清楚如何使用 ReactTestUtils.Simulate 测试此功能，但无法弄清楚如何设置应该发送到 event.currentTarget.files 中的 onChange 回调的文件。

谁能帮助我正确地指导我如何有效地模拟/测试它？

【问题讨论】：

标签： javascript html testing reactjs reactjs-testutils

【解决方案1】：

发现在调用 TestUtils.Simulate.change 之前，需要在对象上显式设置文件。类似于以下内容的东西应该可以工作。

它是从 Coffeescript 改编的 ES6，所以我不确定它的语法是否完全正确。

// Needs to be an integer keyed object instead of an array to mock a file set
const files = {
   0: {name: 'test.jpeg'},
   1: {name: 'test.mp4'}
};

const fileInput = TestUtils.findRenderedDOMComponentWithTag(<testView>, 'input');    
fileInput.files = files;
TestUtils.Simulate.change(fileInput)

【讨论】：