Jest模拟input ArrowUp keydown事件测试未触发目标函数的问题

出现addUp调用次数为0的报错，是两个叠加问题导致的：

• 测试里单独声明的const addUp = jest.fn()是测试作用域内的独立空函数，和组件内部闭包里定义的addUp没有任何关联。组件逻辑运行时只会调用自身内部的私有函数，根本接触不到测试里的这个mock，不管怎么模拟事件，这个mock的调用记录永远是0。
• 组件本身的handleKeyDown实现有bug：函数没有接收React合成事件作为入参，直接引用全局的event变量。在React的事件代理机制下，这个引用根本拿不到事件对象，就算按键事件成功触发，逻辑也会因为找不到event直接中断。

先修正组件的逻辑问题 #

原handleKeyDown必须接收事件对象作为入参，才能正确读取按键信息，修正后的写法：

// 修复前的错误写法（无入参，直接引用全局event）
// function handleKeyDown() {
//   const input = event.currentTarget;
//   switch (event.key) {
//     case "ArrowUp":
//       addUp();
//       break;
//     case "ArrowDown":
//       minusDown();
//       break;
//   }
//   event.preventDefault();
// }

// 修复后的正确写法
function handleKeyDown(event) {
  switch (event.key) {
    case "ArrowUp":
      addUp();
      break;
    case "ArrowDown":
      minusDown();
      break;
  }
  event.preventDefault();
}

原代码里获取input的逻辑在当前功能中没有实际作用，可以直接删除减少冗余。

调整测试的断言逻辑 #

组件内部的addUp、minusDown是闭包私有逻辑，既无法直接获取，也没必要断言它的调用次数。单元测试的核心是验证组件对外暴露的行为符合预期，而不是绑定内部实现细节——否则后续只要调整内部代码结构，测试就会无意义报错，非常脆弱。
你只需要验证两个核心行为：

• 模拟按下方向键后，传入组件的onChange回调是否被正确调用
• onChange收到的参数是否是增减后的正确数值

修正后的测试用例 #

import { mount } from 'enzyme';
import MyComponent, { Props } from './MyComponent';

let defaultProps: Props;
beforeEach(() => {
  jest.clearAllMocks(); // 每个用例前清空之前的mock调用记录
  defaultProps = {
    max: 100,
    min: 1,
    onChange: jest.fn(),
    value: 10,
  };
});

describe("数值增减输入控件的键盘交互", () => {
  it("按下向上方向键时，数值加1并触发onChange", () => {
    const wrapper = mount(<MyComponent {...defaultProps} />);
    const input = wrapper.find("input");
    
    input.simulate("keydown", {
      key: "ArrowUp",
      preventDefault: jest.fn(),
    });

    // 验证对外暴露的回调行为
    expect(defaultProps.onChange).toHaveBeenCalledTimes(1);
    expect(defaultProps.onChange).toHaveBeenCalledWith(11);
  });

  it("按下向下方向键时，数值减1并触发onChange", () => {
    const wrapper = mount(<MyComponent {...defaultProps} />);
    const input = wrapper.find("input");
    
    input.simulate("keydown", {
      key: "ArrowDown",
      preventDefault: jest.fn(),
    });

    expect(defaultProps.onChange).toHaveBeenCalledTimes(1);
    expect(defaultProps.onChange).toHaveBeenCalledWith(9);
  });
});

这个组件是受控组件，输入框显示的value是由父组件传入的props决定的，并非组件内部state控制。所以直接断言input.prop("value")等于11是不会生效的——除非在测试里手动更新传入的props值，否则input上拿到的永远是初始传入的10。
如果确实需要验证内部state的变化，可以直接通过组件实例读取内部state值做断言，但这部分属于内部实现细节，优先测试对外回调的稳定性更强。

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