javascript - react 如何测试在 FileReader onload 函数中调用的函数

Question

我在组件中有以下代码。我想测试表单的 onSubmit，它在阅读器中调用 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

从将模拟上传作为 Prop 传递并创建假事件开始，这真是太棒了!

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

我建议将您的职能分解为更单一的职责。就目前而言，您的 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 可以与readerOnLoad` 交互；

reader.onload = this.readOnLoad(file);

此时，您可以测试一下:

1. handleSubmit 使用文件参数调用 readerOnLoad(如果它存在于状态中)。
2. readerOnLoad，调用一个文件参数，然后调用一个事件参数，调用 this.props.onLoad 事件目标 result 值。

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

看起来您已经了解如何传入与 native /浏览器对象匹配的鸭子类型参数(如 event)，所以只需将它们放在一起并享受您 nicely 的安心协作功能!