web-dev-qa-db-ja.com

Enzymeでのファイルアップロードテスト

レンダー関数にFileInputがあります

      <FileInput
      accept= "image/jpeg,image/png,audio/mp3"
      onChange= {this.fileInputOnChange}
      children= {<i className="fa fa-Paperclip"/>}
      className= 'fileInput'
      />

ファイルアップロードのテストを作成する必要があります。変更関数をシミュレートすると、関数fileInputOnChangeが呼び出されます。

fileInputOnChange: function(evt){
var file = evt.target.files[0];
var fileReader = new FileReader();

fileReader.onload = function(readFile){
  // Check the file type.
  var fileType = file.type.toLowerCase();

  if(fileType.lastIndexOf('image') === 0 && (fileType.lastIndexOf('png') >= 0 || fileType.lastIndexOf('jpeg'))){
    var image = new Image();

    image.onload = function(){
      var attachedFile = {
        attached: file,
        mediaSource: readFile.target.result,
        type: 'image'
      } 
        this.props.onChange(attachedFile);
    }.bind(this);

    image.onerror = function(){
      this.props.onError("INVALID_TYPE");
    }.bind(this);

    image.src = readFile.target.result;
  }else if(fileType.lastIndexOf('audio') === 0 && fileType.lastIndexOf('mp3') >= 0){
    //@todo: manage audio upload here
    var audio = new Audio();

    audio.oncanplaythrough = function(){
      var attachedFile = {
        attached: file,
        mediaSource: readFile.target.result,
        type: 'audio'
      } 
        this.props.onChange(attachedFile);
    }.bind(this);

    audio.onerror = function(e){
      this.props.onError("INVALID_TYPE");
    }.bind(this)

    audio.src = readFile.target.result;

  }else if (fileType.lastIndexOf('video') === 0 && fileType.lastIndexOf('mp4') >= 0){        
    var video = document.createElement('video');

    video.oncanplaythrough = function(){
      var attachedFile = {
        attached: file,
        mediaSource: readFile.target.result,
        type: 'video'
      } 
        this.props.onChange(attachedFile);
    }.bind(this);

    video.onerror = function(){
      this.props.onError("INVALID_TYPE");
    }.bind(this)

    video.src = readFile.target.result;
  }
}.bind(this);

fileReader.onerror = function(){
  this.props.onError("READING_ERROR");
}.bind(this)

fileReader.readAsDataURL(file); }

アップロードボタンのシミュレーション中にファイルを追加できなかったため、このシナリオのテストの記述方法がわかりません。誰かがこのようなシナリオに遭遇したことがありますか？私はすべてのちょっとした助けに素晴らしいと思います。

it('testing attachfile change function...',()=>{
 const wrapper=shallow(<AttachFile />);
 wrapper.find('FileInput').simulate('change');
 console.log(wrapper.debug());
 });

上記のテストを試したところ、次のエラーが発生しました

TypeError: Cannot read property 'target' of undefined
  at [object Object].fileInputOnChange (js/components/home/chats/AttachFile.react.js:11:16)
  at node_modules/enzyme/build/ShallowWrapper.js:768:23
  at ReactDefaultBatchingStrategyTransaction.Mixin.perform (node_modules/react/lib/Transaction.js:138:20)
  at Object.ReactDefaultBatchingStrategy.batchedUpdates (node_modules/react/lib/ReactDefaultBatchingStrategy.js:63:19)
  at batchedUpdates (node_modules/react/lib/ReactUpdates.js:98:20)
  at node_modules/enzyme/build/ShallowWrapper.js:767:45
  at withSetStateAllowed (node_modules/enzyme/build/Utils.js:196:3)
  at ShallowWrapper.simulate    (node_modules/enzyme/build/ShallowWrapper.js:764:42)
  at Context.<anonymous> (test/sample.js:40:27)
reactjsmochasinonchaienzyme
16
Thomas John

次のようなモックイベントオブジェクトを提供する必要があります。

wrapper.find('FileInput').simulate('change', {
  target: {
     files: [
       'dummyValue.something'
     ]   
  }
});

コンポーネントは内部で多くの作業を行います。これは巨大な副作用のようです（2つのコールバックが定義されており、ロジックが固定されています）。難しいでしょうが、2つのスパイを使用してFileReaderもモックする必要があると思います。1つはreadAsDataURLがonloadを呼び出し、もう1つはonerrorを呼び出します。

次に、コールバックが想定どおりに機能しているかどうかを確認できます。

それが役に立てば幸い！

17
sminutoli