Question

我有一个类似于以下

的React表单的HTML5文件类型输入

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

并在文件上传后this.onChange访问所选文件，验证它们并转换表单。

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

任何人都可以帮助指导我如何有效地模拟/测试这个吗？

Answer 1

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

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

// 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)

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

1 个答案: