如何使用Enzyme正确测试输入变更事件？Jest/Enzyme实践疑问

嗨，我来帮你解决这个Jest/Enzyme测试的问题～针对你的疑问，我分点给你讲清楚：

首先你要知道，Enzyme的shallow渲染返回的ShallowWrapper，本身就支持直接模拟事件，而且不需要真实的DOM节点。因为你的组件是通过e.target.value来更新状态，所以只需要给simulate方法传递一个包含target.value的模拟事件对象就行，完全能触发状态更新和DOM变化。

举个完整的例子：

你的组件代码示例 #

import React, { useState } from 'react';

const InputDisplay = () => {
  const [inputValue, setInputValue] = useState('');

  const handleInputChange = (e) => {
    setInputValue(e.target.value);
  };

  return (
    <div>
      <input 
        type="text" 
        onChange={handleInputChange} 
        value={inputValue} 
      />
      <div className="display-content">{inputValue}</div>
    </div>
  );
};

export default InputDisplay;

对应的测试代码 #

import { shallow } from 'enzyme';
import InputDisplay from './InputDisplay';

describe('InputDisplay Component', () => {
  it('updates the DIV text when input value changes', () => {
    // 浅渲染组件
    const wrapper = shallow(<InputDisplay />);
    const testValue = 'Hello Jest & Enzyme';

    // 模拟input的change事件，传递模拟的事件对象
    wrapper.find('input').simulate('change', {
      target: { value: testValue }
    });

    // 验证DIV的文本是否更新为测试值
    expect(wrapper.find('.display-content').text()).toBe(testValue);
  });
});

至于你问的能不能传入真实DOM节点？其实完全没必要——因为shallow渲染不会把组件挂载到真实DOM中，你也拿不到真实的DOM元素。如果非要用真实DOM的话，你得用mount渲染组件，然后通过wrapper.find('input').getDOMNode()获取真实DOM，但这时候测试逻辑会变得复杂，远不如直接用模拟事件对象高效。

如果你需要测试按键相关的逻辑（比如按下回车、删除键等），模拟keyDown事件是完全没问题的，只需要在模拟事件时传递对应的按键属性（比如key、keyCode）即可。

举个例子，假设你想测试按下回车键时的逻辑：

组件新增keyDown处理 #

const handleKeyDown = (e) => {
  if (e.key === 'Enter') {
    // 这里可以加你需要的逻辑，比如提交、弹窗等
    console.log(`Submitted value: ${inputValue}`);
  }
};

// 给input加上onKeyDown事件
<input 
  type="text" 
  onChange={handleInputChange} 
  onKeyDown={handleKeyDown}
  value={inputValue} 
/>

对应的keyDown测试代码 #

it('triggers submit logic when Enter key is pressed', () => {
  // 模拟console.log
  console.log = jest.fn();
  const wrapper = shallow(<InputDisplay />);
  const testValue = 'Test Submit';

  // 先输入文本更新状态
  wrapper.find('input').simulate('change', { target: { value: testValue } });
  // 模拟按下回车键
  wrapper.find('input').simulate('keydown', { key: 'Enter', keyCode: 13 });

  // 验证逻辑是否触发
  expect(console.log).toHaveBeenCalledWith(`Submitted value: ${testValue}`);
});

• 测试输入框更新DOM的核心逻辑，用shallow+模拟事件对象就足够，不需要真实DOM节点
• 模拟keyDown完全支持，只要传递正确的按键属性就能触发对应逻辑
• 优先使用Enzyme提供的simulate方法，比直接操作真实DOM更简洁、更适合单元测试

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