我有一个组件,其渲染函数如下:
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
const node = document.getElementsByClassName("close"); TestUtils.Simulate.click(node);
来重现相同的错误,其中我有一个带有class="close"
的按钮,它是唯一具有该类的元素/对象,并且这两行代码位于我正在使用的另一个按钮事件处理程序内。一直在寻找解决方案。使用Chrome版本51.0.2704.103,React版本15.3.1。 - vapcguyconst node = document.getElementById("btnRequest")
解决了我的问题,这是一个打开(或关闭)模态窗口的按钮,而不是尝试寻找模态窗口上的关闭按钮。您可以尝试逐个查找,而不是执行var fileInput = TestUtils.findAllInRenderedTree...
吗? - vapcguy