反应如何测试在 FileReader onload 函数中调用的函数

Question

我在一个组件中有以下代码。我想测试表单的 onSubmit，它在 reader 中调用 this.props.onUpload 方法。我该如何测试？我的期望测试不起作用，我猜这是因为 this.props.onUpload 在 reader.onload 函数中？

上传表单.js

handleSubmit(e) {
    e.preventDefault();

    var inputData = '';
    var file = this.state.file;
    if (file) {
        var reader = new FileReader();
        reader.onload = (function(file) {
            return function(e) {
                inputData = e.target.result;
                this.props.onUpload(inputData);
            };
        })(file).bind(this);
        reader.readAsText(file);            
    }

}

render() {
    return(
        <form onSubmit={this.handleSubmit}>
            <label> Enter File: <br/>
                <input type="file" id="fileinput" onChange={this.handleChange}/>    
            </label>
            <input type="submit" value="Submit" className="btn-upload" />
        </form>
    );
}

上传表单.test.js

const mockOnUpload = jest.fn();
const file = new File([""], "filename");
const form = shallow(<UploadForm onUpload={mockOnUpload}/>);
const event = {
          preventDefault: jest.fn(),
          target: {files : [file]}
        };

describe('when clicking `upload-file` button', () => {
    beforeEach(() => {
      form.find('#fileinput').simulate('change', event);
      form.find('form').simulate('submit', event);
    });

    it('calls the handleSubmit CallBack', () => {
      expect(mockOnUpload).toHaveBeenCalledWith(input);
    });

});

Answer 1

模拟上传作为道具传入并创建假事件的超级好开始！

我总是喜欢在我自己的工作中遇到这样的测试问题，因为它告诉我我有一种代码味道：如果它不容易测试，这可能意味着它更难预测、更难调试、更难解释，等等。

我建议将您的职能分解为更多的单一职责。就目前而言，您handleSubmit所做的不仅仅是处理提交。它还onload向 FileReader 的实例添加一个函数并调用readAsText该实例。

你的IIFE :

function(file) {
  return function(e) {
    inputData = e.target.result;
    this.props.onUpload(inputData);
  };
})(file).bind(this);

可以拉出bind组件上的箭头函数（处理）：

readerOnLoad = file => (e) => {
  this.props.onUpload(e.target.result);
}

（另外，这里file需要作为参数吗？似乎没有被使用。）

然后handleSubmit can interact withreaderOnLoad` 就像；

reader.onload = this.readOnLoad(file);

此时，您可以测试：

1. handleSubmitreaderOnLoad如果存在于 state 中，则使用文件参数调用。
2. readerOnLoad，使用文件参数和事件参数调用this.props.onLoad，使用事件目标值调用result。

如果这两项测试都通过，您就可以确信您的代码将适用于真实事件、文件和 FileReader 实例。

看起来您已经了解如何传入event与本机/浏览器对象匹配的鸭子类型参数（如s），所以只需将它们放在一起，享受您良好协作的功能带来的安心！