I'm trying to Jest test a method of a Vue component that contains FileReader. I need to read a json file.
Method:
readConfig(event) {
this.config.headers = [];
this.config.keys = [];
this.config.rules = [];
this.columns = 0
const fr = new FileReader();
fr.onload = e => {
const result = JSON.parse(e.target.result);
this.config.connectionType = result.connection.type;
this.config.url = result.connection.url;
if(result.connection.type === 'rest') {
this.config.api = result.connection.api;
this.config.time = result.connection.time;
} else {
this.config.socket = result.connection.socket;
}
result.table.headers.forEach((el, index) => {
this.addElement();
this.config.headers[index] = el;
this.config.keys[index] = result.table.keys[index];
})
this.config.rules = result.table.rules;
}
fr.readAsText(event.target.files.item(0));
}
Called by this input file:
<input v-if="!saved" type="file" @change="readConfig" accept=".json">
I tried to follow some solutions, but I can't get the upload to load my json Thanks in advance
Thx for the help. I found the solution to my problem
test('Upload rest configuration', () => {
// @ts-ignore
jest.spyOn(global, 'FileReader').mockImplementation(function () {
// @ts-ignore
this.readAsText = jest.fn();
});
wrapper.find('input[type="file"]').trigger('change');
// @ts-ignore
let reader = FileReader.mock.instances[0];
reader.onload({ target: { result: JSON.stringify(config) }, files: [{name: 'config.json', size:'20000', type:'text/json'}] });
});