使用Jest单元测试无法模拟用户输入：fireEvent、userEvent均无效

问题根源 #

你使用的是自定义Input组件而非原生HTML的<input>标签，测试工具（userEvent/fireEvent）默认针对原生表单元素设计，直接操作自定义组件的DOM节点无法正确触发输入逻辑；同时自定义组件可能未将value属性透传给内部原生输入框，导致toHaveValue获取到undefined。

解决方案 #

1. 检查自定义Input组件的实现

确保自定义组件内部正确绑定原生输入框的value和onChange事件，匹配你业务中定义的事件结构：

// 自定义Input组件参考实现
const Input = ({ value, onChange, ...props }) => {
  const handleNativeChange = (e) => {
    // 按照组件要求的结构传递参数
    onChange({ detail: { value: e.target.value } });
  };

  return (
    <input 
      type="text" 
      value={value} 
      onChange={handleNativeChange} 
      {...props} 
    />
  );
};

核心要保证：原生input的value与组件传入的value绑定，且onChange事件按约定的{detail: {value}}结构传递值。

2. 调整测试代码，定位到原生输入框

若无法修改自定义Input组件，测试时直接获取组件内部的原生input元素操作：

test("the input field should take user's input", async () => {
  render(<testModal />);
  // 先获取自定义Input组件，再定位内部原生input
  const customInput = screen.getByTestId("add-input");
  const nativeInput = customInput.querySelector("input");
  
  await userEvent.type(nativeInput, "testTyping");
  
  // 断言原生input的value，或直接断言组件绑定的state更新
  expect(nativeInput).toHaveValue("testTyping");
});

3. 确认组件的state更新逻辑

确保onInputChange函数正确更新绑定到Input的name状态：

// 组件内的状态更新逻辑示例
const onInputChange = (value) => {
  setName(value); // 必须正确更新与Input的value绑定的state
};

如果state未正确更新，即使触发了输入事件，Input的value也不会变化，测试必然失败。

4. 直接触发自定义组件的onChange事件

如果自定义组件的onChange是自定义事件结构，可以直接模拟触发：

test("the input field should take user's input", async () => {
  render(<testModal />);
  const inputMessage = screen.getByTestId("add-input");
  
  // 按组件约定的事件结构触发change事件
  fireEvent.change(inputMessage, { detail: { value: "testTyping" } });
  
  expect(inputMessage).toHaveValue("testTyping");
});

内容的提问来源于stack exchange，提问作者snowfall