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

Question

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

Just tested. I have this error simulate(...) is not a function — Xeyos
– Xeyos, Commented Sep 15, 2021 at 12:11
The answer is for React and Enzyme. You need to adjust parts that are specific to Vue test utils accordingly. The part that involves Filereader is the same. — Estus Flask
– Estus Flask, Commented Sep 15, 2021 at 12:43
Now I am able to enter the fr.onload but JSON.parse always returns " Unexpected token o in JSON at position 1". this call is correct? reader.onload ({target: {result: {"connection": {"type": "rest", "url": "http: // localhost: 3000", "api": "/", "time": 3}}}, files: [{name: 'config.json', size: '20000', type: 'text / json'}]}); — Xeyos
– Xeyos, Commented Sep 15, 2021 at 12:57
The error means that an object was provided where JSON string was expected, stackoverflow.com/questions/43612837/… . result is supposed to be a string. — Estus Flask
– Estus Flask, Commented Sep 15, 2021 at 16:16

Xeyos · Accepted Answer · 2021-09-16 06:01:22Z

1

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

    });

answered Sep 16, 2021 at 6:01

Xeyos

915 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related