CODEWITHSUNDEEP
reactjstestingjestjs
Quân Hoàng Phan
Quân Hoàng Phan

Reputation: 43

fireEvent.change does not trigger onChange listener

I am building a React component that has an input "file" type element.

export default function NavBar() {
    return (
       <label htmlFor='upload-image' className={classes.label}> Upload </label>
       <input type='file' 
              id='upload-image'
              onChange={ (e) => { uploadImage(e) } } />
    )
}

uploadImage is a standalone function, exported from uploadImage.js:

// uploadImage.js

const uploadImage = async (e) => {
    // some code to upload the image to a cloud database
}

export { uploadImage };

With Jest and React Testing Library, I am trying to test whether uploadImage is triggered whenever the input "file" type element is changed. Below is my work so far:

import * as uploadImage from '../api/uploadImage';

test("when user changes the file input, uploadImage function is called once", () => {
    render( <NavBar /> );

    const fileInput = screen.getByLabelText(/Upload/i);

    fireEvent.change(fileInput, {
        target: {
            files: [new File(['(⌐□_□)'], 'chucknorris.png', {type: 'image/png'})],
        },
    });

    const mock = jest.spyOn(uploadImage, 'uploadImage');
    expect(mock).toBeCalled();
});

I expect the test to pass. When fireEvent.change() is initiated, uploadImage should be initiated. However, the test fails, showing that uploadImage was not initated as follows:

expect(jest.fn()).toBeCalled()

    Expected number of calls: >= 1
    Received number of calls:    0

I suspect that fireEvent.change() is not working, but I am not sure. \

  1. Can you give an explanation why the test did not pass?
  2. For uploadImage.js, instead of writing export { uploadImage }, how should I use jest to mock uploadImage if I use export default, i.e export default uploadImage?

Thank you very much!

Upvotes: 3

Views: 6278

Answers (1)

tromgy
tromgy

Reputation: 5823

The problem is that spyOn is called after the event is fired.

Change the test code to:

test('when user changes the file input, uploadImage function is called once', () => {
  render(<NavBar />);
  const mock = jest.spyOn(uploadImage, 'uploadImage');
  const fileInput = screen.getByLabelText(/Upload/i);

  fireEvent.change(fileInput, {
    target: {
      files: [new File(['(⌐□_□)'], 'chucknorris.png', { type: 'image/png' })],
    },
  });

  expect(mock).toBeCalled();
});

so that the mock function is created and ready before it gets called.

Upvotes: 2

Related Questions