Имитация ввода файла в React TestUtils

У меня есть компонент со следующей функцией рендеринга: -

  render: function() {
   <input
    type="file"
    name: this.props.name,
    className={this.props.className}
    onChange={this.props.handleChange}
    accept={this.props.accept}/>
 }

Состояние управляется контейнером, который загружает файл на сервер с помощью вызова jquery AJAX:

 getInitialState: function() {
   return {
     uploaded: false
  };
}

handleChange: function(event) {
event.preventDefault();

var file = event.target.files[0];
if (!file) {
  return;
}

var reader = new FileReader();
reader.readAsText(file, 'UTF-8');
var self = this;

reader.onload = function(e) {
  var content = e.target.result;

 var a =  $.ajax({
    type: 'PUT',
    url: 'http://localhost:8080/upload',
    contentType: 'application/json',
    dataType: "json",
    data: JSON.stringify({
      "input": content
    })
  })
  .fail(function(jqXHR, textStatus, errorThrown) {
    console.log("ERROR WHEN UPLOADING");
  });

 $.when(a).done(function() {
      self.setState({
      uploaded: true,
      });
  });

  } 
}

Это работает безупречно при работающем сервере. Однако я хотел бы протестировать без необходимости вызывать сервер. Вот тест Mocha, который я написал до сих пор:

var React = require('react');
var assert = require('chai').assert;
var TestUtils = require('react-addons-test-utils');
var nock = require("nock");
var MyContainer = require('../containers/MyContainer');

describe('assert upload', function () {
  it("user action", function () {

    var api = nock("http://localhost:8080")
        .put("/upload", {input: "input"})
        .reply(200, {
        });

  var renderedComponent = TestUtils.renderIntoDocument(
          <MyContainer />
  );

  var fileInput = TestUtils.findAllInRenderedTree(renderedComponent,
           function(comp) { 
                           return(comp.type == "file");
                          });

 var fs = require('fs') ;
 var filename = "upload_test.txt"; 
 var fakeF = fs.readFile(filename, 'utf8', function(err, data) {
    if (err) throw err;
 });

  TestUtils.Simulate.change(fileInput, { target: { value: fakeF } });

  assert(renderedComponent.state.uploaded === true);
  });
});

Получение этой ошибки: -

TypeError: Cannot read property '__reactInternalInstance$sn5kvzyx2f39pb9' of undefined

reactjs unit-testing fs mocha.js reactjs-testutils
person fbielejec    schedule 20.04.2016    source источник
comment
Я могу воспроизвести ту же ошибку, просто выполнив const node = document.getElementsByClassName("close"); TestUtils.Simulate.click(node);, где у меня есть кнопка с class="close" на ней, и это единственный элемент/объект с этим классом, и эти 2 строки находятся внутри другого обработчика событий кнопки, который я использую. Искал решение. Использование Chrome вер. 51.0.2704.103, Реакт версии 15.3.1.   -  person vapcguy    schedule 20.03.2018
comment
Я решил свою проблему, выполнив const node = document.getElementById("btnRequest"), которая представляет собой кнопку, которая открывает (или закрывает) модальное окно, вместо того, чтобы пытаться перейти после кнопки закрытия в самом модальном окне. Вместо того, чтобы делать var fileInput = TestUtils.findAllInRenderedTree..., не могли бы вы сделать что-то подобное и делать это по очереди?   -  person vapcguy    schedule 21.03.2018

Ответы (1)


arrow_upward
0
arrow_downward

Вам нужен «настоящий» файл? Я думаю, что ваша проблема заключается в том, как вы управляете своим «поддельным» файлом и событием изменения ввода вашего файла. Вы можете использовать File Api для «создания» фиктивного файла, а затем вам просто нужно правильно настроить ввод файла. Он использует не value, а files.

// similar example from KCD https://github.com/testing-library/react-testing-library/issues/93#issuecomment-392126991
const file = new File(['(⌐□_□)'], 'chucknorris.png', { type: 'image/png' });
TestUtils.Simulate.change(fileInput, { target: { files: [ file ] } });

Если вам действительно нужен «файл» (upload_text.txt), то это может быть более сложно. Узел fs.readFile является асинхронным, и данные недоступны за пределами callback, плюс вам придется преобразовать data в фактический файловый объект, чтобы передать его на вход.

// rough pass at this, you'll have to play with it
import fs from 'fs';
const filename = 'upload_text.txt';
fs.readFile(filename, 'utf8', (err, data) => {
  if (err) throw err;
  const file = new File(data, filename, { type: 'text/plain' });
  TestUtils.Simulate.change(fileInput, { target: { files: [ file ] } });
  // whatever comes next
});
person Steve -Cutter- Blades    schedule 14.07.2021