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

测试库-未调用测试onChange

1 个答案: