在React TestUtils中模拟文件输入

Question

我有一个具有以下渲染效果的组件:

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

State由一个容器管理,该容器使用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

Answer 1

您需要“真实”文件吗？我认为您的问题在于如何管理“假”文件以及文件输入的更改事件。您可以使用 File Api“创建”一个虚拟文件，然后只需正确设置文件输入即可。它不使用value，而是使用files.

\n

// similar example from KCD https://github.com/testing-library/react-testing-library/issues/93#issuecomment-392126991\nconst file = new File([\'(\xe2\x8c\x90\xe2\x96\xa1_\xe2\x96\xa1)\'], \'chucknorris.png\', { type: \'image/png\' });\nTestUtils.Simulate.change(fileInput, { target: { files: [ file ] } });\n

\n

如果您确实需要“文件”（upload_text.txt），那么这可能会更加棘手。Nodefs.readFile是异步的，并且数据在 之外不可用callback，而且您必须将 转换data为实际的文件对象才能提供给输入。

\n

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

\n