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() 不工作，但我不确定。 \

你能解释一下为什么测试没有通过吗？
对于uploadImage.js，而不是写export { uploadImage }，如果我使用export default，我应该如何使用jest来模拟uploadImage，即export default 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(); });

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

fireEvent.change 不触发 onChange 监听器

fireEvent.change does not trigger onChange listener

testing

reactjs

jestjs