2

My react component has a File input (upload) element. When an xlsx file is uploaded by the user, a component method is called, which reads the xlsx file converts into JSON and puts it into the redux table. The method is "convertFileDataToJSON" which accepts the File object and does the above.

I need to test this method.

I am not able to use "new File("file://path/to/file")". I get the following error

TypeError: FileConstructor is not a constructor (evaluating 'new File')

I am using "new Blob" to create a blob object and sending it to the instance method to the instance method.

var myBlob = new Blob(["application_id,Statement " +
"Received Date,Statement Requested Date,"+
"1,10/10/70,10/10/70,10/10/70"+
"2,12/20/71,12/20/71,12/20/71"], {type : "text/plain"});
const json = component.instance().convertFileDataToJSON(myBlob);

Any help would be appreciated, in how to test this method.

Prashant Pimpale
  • 10,349
  • 9
  • 44
  • 84
Soundararajan
  • 31
  • 2

1 Answers1

1

Ok, not an answer, but let me suggest you to change how you test your own code.

Testing imperatively a React Component method is more or less an anti-pattern — a bad thing. The reason is simple: a Component defines its public API as props and that’s the surface you should test against.

Note: while component instance methods are actually exposed to parent components that have a reference to them, it is considered a bad practice.

A nicer approach would be to have a standalone function that can be tested in isolation:

export function convertFileDataToJSON(file) {
  return // ...
}

and you would test it (in Jest) as:

import { convertFileDataToJSON } from '../utils/somewhere';

const blob = new Blob(
  [
    "application_id,Statement " +
    "Received Date,Statement Requested Date,"+
    "1,10/10/70,10/10/70,10/10/70"+
    "2,12/20/71,12/20/71,12/20/71"
  ],
  {type : "text/plain"}
);

describe('XLSX to JSON', () => {
  it('Works on simple CSV files', () => {
    const data = convertFileDataToJSON(blob);

    expect(data).toMatch( ...something );
  });
})
Pier Paolo Ramon
  • 2,780
  • 23
  • 26
  • Thanks a lot "Pier Paolo Ramon". I made it a separate util function. I am sure it is getting invoked. I am returning a promise from this function. Now I have to pass a File Object to this convert function to get it converted. Blob appears to be not working. new File() gives error. ``` I am kind of stuck here. And how do I console.log() the "data" from this function's return? ``` Thanks – Soundararajan Aug 24 '18 at 22:35
  • How are you running your tests? Are they run in Node.js or in the browser? – Pier Paolo Ramon Aug 27 '18 at 12:56
  • I am new to test. I run "npm run test" from CL. It is enzyme. We use only "shallow" rendering. Never using "mount". Functions are tested with jasmine.createSpy(). I believe it uses PhantomJS 2.1.1 (Mac OS X 0.0.0). Please let me know if this info is not enough. – Soundararajan Aug 28 '18 at 00:39
  • You should definitely update your that info. DId you have a look at this Q&A? https://stackoverflow.com/questions/38656569/angularjs-fileconstructor-is-not-a-constructor – Pier Paolo Ramon Aug 28 '18 at 06:40
  • I have a test that checks if some other method is called with a new blob object, however i get a reference error for "Blob" as it is a browser thing. How have you got around this in your Jest tests? – Jeremy Nov 27 '19 at 17:37