fireEvent.change 没有触发 onSelect 事件

Question

const MyPage = (props) => {
    const setCol = useCallback((input)=> 
        // some implementation here
        myFn() // myFn is a property in props
    )
    const handleOnSelection = useCallback ((e) => {
            ...
            setCol(someInput)
            ...
        }, [props]
    )
    return (
        <div>
            <div>
                <GravityLabel optional={false} size='medium'>
                    Select here
                </GravityLabel>
                <GravityTooltip message={msg} size='small' position='top-left'/>
            </div>
            <GravityComboBox
              optionsArray={arr}
              onSelect={(e) => handleOnSelection(e)}
              disabled={false}
              value={default}
              data-testid='dropdown-to-be-tested'
            />
        </div>
    )
}
-------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------
const mockFn = jest.fn()
const props = {
    myFn: mockFn
    // other props
}
describe('my tests', () => {
 it('should handle onSelect change', async () => {
    render(<MyPage {...props} />)
    const dropDown = screen.getByTestId('dropdown-to-be-tested')
    fireEvent.change(dropDown, {
      target: { value: 'selection1' }
    })
    await waitFor(() => {
      expect(mockFn).toHaveBeenCalledTimes(1)
    })
  })

我有一个 MyPage.js，它在 ui 中按照预期完美工作（所以 MyPage.js 中的代码绝对没有问题）。我想为它编写测试以增加代码覆盖率。

上面是我的 MyPage.js 和 MyPage.test.js 代码（超缩短版本）

问题：

错误：expect(jest.fn()).toHaveBeenCalledTimes(预期)
预计通话次数：1
接听电话数量：0

我放置了一个调试器，发现它不会进入

handleOnSelection

，因此不会调用

setCol

，因此不会调用

mockFn

，导致收到的调用次数：0

知道为什么以及如何解决吗？

Answer 1

问题可能是

fireEvent.change

不会触发

onSelect

事件。尝试使用

fireEvent.click

代替：

import { fireEvent, render, screen, waitFor } from '@testing-library/react';

it('should handle onSelect change', async () => {
  render(<MyPage {...props} />);
  const dropDown = screen.getByTestId('dropdown-to-be-tested');
  fireEvent.click(dropDown);
  fireEvent.change(dropDown, { target: { value: 'selection1' } });
  await waitFor(() => {
    expect(mockFn).toHaveBeenCalledTimes(1);
  });
});