fireEvent.change 不会触发 onChange 监听器

Question

我正在构建一个具有输入“文件”类型元素的 React 组件。

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是一个独立的函数，从uploadImage.js导出：

// uploadImage.js

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

export { uploadImage };

使用 Jest 和 React 测试库，我正在尝试测试是否会在输入“文件”类型元素发生更改时触发 uploadImage。以下是我到目前为止的工作：

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();
});

我希望测试通过。当 fireEvent.change() 被启动时，uploadImage 应该被启动。但是测试失败，说明uploadImage没有被初始化如下：

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

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

我怀疑 fireEvent.change() 不起作用，但我不确定。 \

1. 您能解释一下为什么测试没有通过吗？
2. 对于uploadImage.js，如果我使用导出默认值，即export default uploadImage，我应该如何使用jest来模拟uploadImage，而不是写export { uploadImage }？

非常感谢！

Answer 1

问题是spyOn 在事件被触发之后被调用。

将测试代码改为：

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();
});

以便在调用模拟函数之前创建并准备好它。