CODEWITHSUNDEEP
javascriptvue.jsjestjs
Xeyos
Xeyos

Reputation: 71

How test a FileReader to read a json file with Jest?

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

Upvotes: 1

Views: 676

Answers (1)

Xeyos
Xeyos

Reputation: 71

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'}] });

    });

Upvotes: 1

Related Questions