Reactjs 测试库-未调用Test onChange

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

onChange

以下是更改：

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

setValue(event.target.value)
};

consthandleclick=（事件：React.MouseEvent）=>{
如果（sameValueClicked）返回；
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();
});

it（'如果选择了相同的值，则不调用onChange'，async（）=>{
渲染(
);
firevent.click（screen.getByLabelText（'Value Picker'））；
等待waitFor（（）=>screen.getByRole（'dialog'）；
firevent.click（screen.getByLabelText（'1st'））；
expect（screen.queryByRole（'dialog'））.toBeInTheDocument（）；
});

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

---

有什么想法吗？

将您的点击事件包装在

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

从'react dom/test utils'导入{act}；
// ...
它（'如果选择了相同的值，则不调用onChange'，async（）=>{
const onChange=jest.fn（）
渲染(
);
act（（）=>fireEvent.click（screen.getByLabelText（'Value Picker'））；
act（（）=>fireEvent.click（screen.getByLabelText（'1st'））；
expect（onChange）.not.tohavebeincall（）；
});

将单击事件包装在

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

从'react dom/test utils'导入{act}；
// ...
它（'如果选择了相同的值，则不调用onChange'，async（）=>{
const onChange=jest.fn（）
渲染(
);
act（（）=>fireEvent.click（screen.getByLabelText（'Value Picker'））；
act（（）=>fireEvent.click（screen.getByLabelText（'1st'））；
expect（onChange）.not.tohavebeincall（）；
});

也许我不够清楚。我希望删除

expect（screen.queryByRole（'dialog'））.toBeInTheDocument（）

，并判断对其他内容的测试。是的，您可以测试值是否已更改以及是否正在调用函数。让我编辑一下答案。编辑了不调用函数行为的答案后，您可以测试函数是否正在被调用，即

是否已调用
，更合适的答案是
是否已调用
，并测试传递的参数。情况并非如此，fireEvent已经在内部调用了act。即使没有
act（）
，我也可以确认它确实有效：）。非常感谢。也许我不够清楚。我希望删除
expect（screen.queryByRole（'dialog'））.toBeInTheDocument（）
，并判断对其他内容的测试。是的，您可以测试值是否已更改以及是否正在调用函数。让我编辑一下答案。编辑了不调用函数行为的答案后，您可以测试函数是否正在被调用，即
是否已调用
，更合适的答案是
是否已调用
，并测试传递的参数。情况并非如此，fireEvent已经在内部调用了act。即使没有
act（）
，我也可以确认它确实有效：）。非常感谢。显示更多上下文：单击什么是
samevalue
，
setValue（）
？需要明确的问题陈述。打开的对话框保持打开状态-这是什么意思？这不是最佳解决方案-最佳解决方案是什么样的，它到底有什么问题？@k-wasilewski:
sameValueClicked
是一个布尔字段，指示是否单击了与当前值相同的值<代码>设置值
是设置当前值的函数@EstusFlask：选择值后，显示值的对话框应关闭。我设想可选的解决方案如下：
如果单击相同的值，请确保未执行onChange
。我的意思是：向我们展示
setValue（）
实现。无论如何，您可以测试是否调用了一个函数，如@Muhammad Ali sugested。显示更多上下文：什么是
sameValueClicked
，
setValue（）
？需要一个清晰的问题陈述。打开的对话框保持打开状态-这是什么意思？这不是最佳解决方案-最佳解决方案是什么样的，它到底有什么问题？@k-wasilewski:
sameValueClicked
是一个布尔字段，指示是否单击了与当前值相同的值<代码>设置值
是设置当前值的函数@EstusFlask：选择值后，显示值的对话框应关闭。我设想可选的解决方案如下：
如果单击相同的值，请确保未执行onChange
。我的意思是：向我们展示
setValue（）
实现。无论如何，您可以测试是否正在调用函数，如@Muhammad Ali sugested。