Dateien hochladen in Enzym-Tests
Ich habe eine FileInput in meinem render-Funktion
<FileInput
accept= "image/jpeg,image/png,audio/mp3"
onChange= {this.fileInputOnChange}
children= {<i className="fa fa-paperclip"/>}
className= 'fileInput'
/>
Muss ich schreiben, ein test für die Datei hochladen, wenn ich simulieren Sie die Funktion ändern Sie die Funktion aufrufen 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); }
Ich konnte nicht fügen Sie alle Dateien, die während der Simulation die Schaltfläche "hochladen", ich bin verwirrt, wie zu schreiben, der test für dieses Szenario. Jemand kam über diese Art von Szenarien? Ich wäre dankbar für alle sorta hilft.
it('testing attachfile change function...',()=>{
const wrapper=shallow(<AttachFile />);
wrapper.find('FileInput').simulate('change');
console.log(wrapper.debug());
});
Als ich versuchte, den obigen test habe ich die folgenden Fehler
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)
- habe keine Lösung zu simulieren ändern???
Du musst angemeldet sein, um einen Kommentar abzugeben.
Benötigen Sie einen verspottet event-Objekt, das etwas wie:
Ihre Komponente seiner macht eine Menge Arbeit im inneren, die wie eine riesige Nebenwirkung (es gibt zwei Rückrufe mit Logik genagelt). Es wird schwierig sein, aber ich nehme an, Sie brauchen, um mock FileReader als auch mit zwei Spione, eine Reaktion auf die
readAsDataURL
Aufruf deronload
und ein weiterer Aufruf deronerror
.Dann können Sie prüfen, ob Ihre Rückrufe sind zu tun, was das soll.
Hoffe, es hilft!