reactjs - Enzyme 中的文件上传测试

Question

我的渲染函数中有一个 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)

Answer 1

您需要提供一个模拟事件对象，例如:

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

你的组件在内部做了很多工作，这就像一个巨大的副作用(它定义了两个带有固定逻辑的回调)。这会很困难，但我想您还需要使用两个 spy 来模拟 FileReader，其中一个对 readAsDataURL 使用react调用onload另一个叫 onerror .

然后您可以检查您的回调是否正在执行预期的操作。

希望对你有帮助!