2

I am trying to write a unit test for a file (image) upload using test-library for React, however, when I log the file in the console it shows an empty object. I am not sure if there is any path configuration required. The image is located in the same directory as test src/util/tests/.

Here is my code:

const file = new File(["logo"], "logo.png", { type: "image/png" });
const imageComponent = screen.getByLabelText(/Profile Picture/i);

console.log(file);
userEvent.upload(imageComponent, file);

console.log(imageComponent.files[0]);
expect(imageComponent.files[0]).toStrictEqual(file);
expect(imageComponent.files.item(0)).toStrictEqual(file);
expect(imageComponent.files).toHaveLength(1);

Here is my console output:

console.log
File {}

at Object.<anonymous> (src/util/tests/Register.test.js:54:11)

console.log
File {}
at Object.<anonymous> (src/util/tests/Register.test.js:57:11)
AdishRao
  • 163
  • 1
  • 1
  • 12

1 Answers1

0

I had the same problems. So i post for the next one. Found solution here : https://stackoverflow.com/a/71973296/4827578

Blob is not supported in node. Add a polyfill :

yarn add blob-polyfill -D

and then import the following in your jest setupTests:

import 'blob-polyfill';

Valtena
  • 21
  • 2
  • 7