测试库 - 未调用测试 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();
});