How to trigger FileReader's `onloadend` in unit tests?

Question

I'm trying to test an input type=file component, using the react testing-library.

The component is a standard <input> element, with the following function to handle an image submission:

export default function ImageUpload(props) {
  const { image, setImage } = props;
  const handleImageChange = e => {
    e.preventDefault();
    let reader = new FileReader();
    const imageFile = e.target.files[0];
    reader.onloadend = () => {
      const image = reader.result;
      setImage(image);
    };
    reader.readAsDataURL(imageFile);
  };
  // etc.
}

As I wanted to simulate the uploading of an image, I went about testing it this way:

test("ImageUpload shows two buttons after an image has been uploaded", () => {
    const setImageSpy = jest.fn();
    const image = "data:image/jpeg;base64,/9j/4AAQSkZJ//20==";
    const file = new File([image], "chucknorris.jpg", { type: "image/jpeg" });

    const readAsDataURL = jest.fn();
    const onloadend = jest.fn();
    jest.spyOn(global, "FileReader")
      .mockImplementation(function() {
        this.readAsDataURL = readAsDataURL;
        this.onloadend = onloadend;
      });

    const { getByTestId } = render(
      <ImageUpload image={image} setImage={setImageSpy} />
    );
    fireEvent.change(getByTestId("ImageUpload"), {
      target: {
        files: [file]
      }
    });
    expect(setImageSpy).toHaveBeenCalledWith(image);  // this fails
    expect(readAsDataURL).toHaveBeenCalledTimes(1);
    expect(readAsDataURL).toHaveBeenCalledWith(file);
  });

The problem is that setImageSpy never gets called. If I understand it correctly, this is because onloadend never gets triggered.

How can I fire that event?

readAsDataURL will be called with the actual File and not the base64 one.. so you need to change the expect accordingly. For setImageSpy to be called, not sure but you probably need to mock onloadend along with readAsDataURL? — tanmay
– tanmay, Commented Jul 6, 2020 at 11:54
Good point on readAsDataURL: however, the main problem is that it gets called but ... with no arguments. I've tried mocking out onloadend but the result is the same unfortunately. — Jir
– Jir, Commented Jul 6, 2020 at 12:43
Not sure yet about your jest test, but in your actual code you shouldn't be using a FileReader here, create a blob:// URL from the File using URL.createObjectURL(blob) — Kaiido
– Kaiido, Commented Jul 6, 2020 at 22:47
Thanks for the tip @Kaiido! I wasn't aware of createObjectURL() and I've just finished reading about the difference in another answer here on SO. I think you're right, the one you propose is the neater way to go. — Jir
– Jir, Commented Jul 7, 2020 at 5:22

Estus Flask · Accepted Answer · 2020-07-13 21:59:05Z

8

+50

According to the expected behaviour, readAsDataURL mock is supposed to provide result rather than being a stub.

this.onloadend = onloadend is a step in wrong direction. onloadend shouldn't be mocked because it's assigned in tested code. It needs to be manually called in the test:

jest.spyOn(global, "FileReader")
  .mockImplementation(function() {
    this.readAsDataURL = jest.fn(() => this.result = image);
  });

...

expect(FileReader).toHaveBeenCalledTimes(1);

const reader = FileReader.mock.instances[0];

expect(reader.readAsDataURL).toHaveBeenCalledTimes(1);
expect(reader.readAsDataURL).toHaveBeenCalledWith(file);
expect(reader.onloadend).toEqual(expect.any(Function));

expect(setImageSpy).not.toHaveBeenCalled();

act(() => reader.onloadend());

expect(setImageSpy).toHaveBeenCalledWith(image);

edited Jul 13, 2020 at 21:59

answered Jul 13, 2020 at 20:50

Estus Flask

226k79 gold badges478 silver badges620 bronze badges

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

3 Comments

Jir Over a year ago

Good point on not mocking onloadend. Your solution is almost correct: there are just two things that I'm not sure about. First, the mock for readAsDataURL shouldn't be image => this.result = image otherwise it'll store in result the argument passed (the file) - I fixed it in your code. Second, once I run the test I get the following error: console.error node_modules/react-dom/cjs/react-dom.development.js:545 Warning: An update to ImageUpload inside a test was not wrapped in act(...). What could this be due to?

Estus Flask Over a year ago

Thanks for the fix, indeed, this was a mistake. As for the error, it makes sense, RTL uses act internally for its own functions but since the state was updated without using its API, it needs to be wrapped with act.

Jir Over a year ago

I see! Just perfect. Thanks! Can't assign the bounty points just yet for some reason. Will do as soon as SO allows me (~5 hrs).

Collectives™ on Stack Overflow

How to trigger FileReader's `onloadend` in unit tests?

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related