Как смоделировать переменную ref, чтобы мы могли проверить условия на ее основе? - PullRequest
1 голос
/ 26 марта 2019

У меня есть элемент ввода файла, который связан с переменной ref.На основе загруженных файлов в событии onChange содержимое файла обрабатывается.В настоящее время я пишу тестовые случаи для проверки этой функциональности.

App.js

export class Dashboard extends React.Component {
constructor(props) {
    this.uploadFile = React.createRef();
    //Constructing...
  }

readFileContents() {
    const files = this.uploadFile.current.files;

    for (let key in files) {
      if (files.hasOwnProperty(key)) {
        const file = files[key];
        const reader = new FileReader();
        let settings;

        // eslint-disable-next-line no-loop-func
        reader.onload = e => {
          const extension = file.name.split('.')[1];
          //OnLoad Handler
        };

        console.log(this.uploadFile.current.files)
        reader.readAsText(file); //TypeError: Failed to execute 'readAsText' on 'FileReader': parameter 1 is not of type 'Blob'.
      }
    }
  };

render() {
    return (
      <div className="dashboard wrapper m-padding">
        <div className="dashboard-header clearfix">
          <input
            type="file"
            ref={this.uploadFile}
            webkitdirectory="true"
            mozdirectory="true"
            hidden
            onChange={this.readFileContents}
            onClick={this.reset}
          />
          <Button
            outline
            className="toggle-btn float-right"
            onClick={this.openFileDialog}
          >
            Choose folder
          </Button>
        </div>
      </div>
    );
  }
}

Я начал с этого ответа переполнения стека и смог издеваться над FileReader.

Первоначально я думал, что моделирование события изменения с целевыми файлами, как показано ниже, автоматически отразится на значениях для this.uploadFile.

const file = new Blob([fileContents], {type : 'application/json'}); 
var event = {"target": {"files": []}};
event.target.files.push(file);

DashboardWrapper.find('input').first().simulate('change', event);

Но поведение было не таким, как я ожидал, и получил следующую ошибку.

TypeError: Не удалось выполнить readAsText для FileReader: параметр 1 не относится к типу Blob.

После этого я пытался изменить файлывведите переменную ref непосредственно из тестового файла, без результатов и с той же ошибкой.

Я хотел бы сначала понять, правильный ли мой подход.Если нет, то как правильно это сделать?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...