FileReader onload関数で呼び出された関数をテストする方法に反応します

Question

コンポーネントに以下のコードがあります。私はフォーム上でそれをテストしたい、それはthis.props.onUploadメソッドをリーダーで呼び出す。 どうすればテストできますか？ 私の期待テストは機能していません、this.props.onUploadがreader.onload関数の中にあるので、私はそれを推測していますか？

UploadForm.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> 
    ); 
} 

UploadForm.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

スーパー素晴らしいスタート！

私はいつも自分の仕事でこれらのようなテストの問題に遭遇します。なぜなら、コードのにおいがあることを私に伝えるからです。テストするのが簡単でなければ、予測するのが難しく、デバッグしにくく、 、&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 can interact with readerOnLoad`のように;この時点で

reader.onload = this.readOnLoad(file); 

、あなたはそれをテストすることができます。それは状態に存在する場合

1. handleSubmitは、ファイル引数でreaderOnLoadを呼び出します。
2. readerOnLoad（ファイル引数を指定して呼び出され、その後にイベント引数が呼び出される）は、resultの値を持つthis.props.onLoadという値を呼び出します。

これらの両方のテストに合格すると、実際のイベント、ファイル、およびFileReaderインスタンスでコードが動作することが確信できます。

ネイティブ/ブラウザオブジェクトと一致するダックタイプの引数（eventなど）を渡す方法は既に分かっているようですので、それらをまとめて、うまく連携して機能させることができます。