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

Question

我在 React 表单中有一个 HTML5 文件类型输入，类似于以下内容

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

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

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

任何人都可以帮助我在正确的方向上指导我如何有效地 mock/test 吗？

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

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

How to set HTML5 file type input with ReactTestUtils

html

javascript

testing

reactjs

reactjs-testutils