测试库-未调用Test-onChange

Question

我遇到了以下情况-我需要编写一个测试，检查如果单击相同的值，是否未执行onChange。

这是onChange:

const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
if (sameValueClicked) return; 
setValue(event.target.value)
};

这是我迄今为止的测试：

it('Does not call onChange if same value selected', async () => {
render(
<ValuePicker
value={"1st"}
onChange={jest.fn()}
/>
);
fireEvent.click(screen.getByLabelText('Value Picker'));
await waitFor(() => screen.getByRole('dialog'));
fireEvent.click(screen.getByLabelText('1st'));
expect(screen.queryByRole('dialog')).toBeInTheDocument();
});

现在，如果正在打开的对话框保持打开状态，但这不是最佳解决方案，则测试通过。

有什么想法吗？

Answer 1

在act中包装您的点击事件，然后测试功能。

import { act } from 'react-dom/test-utils';
// ...
it('Does not call onChange if same value selected', async () => {
const onChange = jest.fn()
render(
<ValuePicker
value={"1st"}
onChange={onChange}
/>
);
act(() => fireEvent.click(screen.getByLabelText('Value Picker')));
act(() => fireEvent.click(screen.getByLabelText('1st')));
expect(onChange).not.toHaveBeenCalled();
});