如何在 Jest 测试中模拟用户真实输入行为-js教程-PHP中文网

如何在 Jest 测试中模拟用户真实输入行为

本文介绍如何使用 @testing-library/user-event 的 type() 方法，精准模拟用户逐字符输入的过程，从而触发 React 组件中依赖输入变化（如防抖、长度校验、useEffect 响应）的自动补全逻辑。

本文介绍如何使用 `@testing-library/user-event` 的 `type()` 方法，精准模拟用户逐字符输入的过程，从而触发 react 组件中依赖输入变化（如防抖、长度校验、useeffect 响应）的自动补全逻辑。

在测试带类型提示（Typeahead）功能的输入框时，仅用 fireEvent.change() 直接设置 value 是不够的——它跳过了键盘事件、焦点管理与输入过程的中间状态，无法真实还原 useEffect 中基于 inputValue 变化（尤其是长度增长、连续输入）所触发的副作用逻辑（例如本例中 inputValue.length > 2 才调用 getTypeahead()）。

正确做法是使用 userEvent.type()：它会按真实用户行为依次触发 focus、一系列 keydown/keypress/input 事件，并同步更新 DOM 的 value 和光标位置，确保每个输入字符都能被 React 状态和副作用捕获。

✅ 正确示例（推荐）：

import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';

// Mock service 返回符合预期的响应数据
jest.mock('../../service/Service', () => ({
  __esModule: true,
  default: jest.fn().mockReturnValue({
    getData: jest.fn().mockResolvedValue({
      data: [
        { name: 'something 2 item 1' },
        { name: 'something 2 item 2' },
      ],
    }),
  }),
}));

test('should trigger typeahead when input length exceeds 2', async () => {
  render(<typeahead></typeahead>);
  const input = screen.getByTestId('test-id');

  // 模拟用户逐字符输入 "something 2"
  await userEvent.type(input, 'something 2');

  // 此时 inputValue 已逐步更新，当长度达到 3 时 useEffect 触发，service.getData 被调用
  expect(service.getData).toHaveBeenCalledWith('som'); // 注意：首次触发发生在输入第3个字符后
  expect(service.getData).toHaveBeenCalledTimes(1); // 后续输入可能因防抖或条件限制未重复触发
});

⚠️ 注意事项：

userEvent.type() 是异步方法，务必使用 await；
若组件内部有防抖（debounce），需配合 jest.useFakeTimers() + jest.runAllTimers() 或 waitFor 等待异步完成；
确保已安装 @testing-library/user-event（v14+ 推荐），旧版 fireEvent.keyDown + fireEvent.change 组合难以覆盖全部边界情况；
type() 默认支持粘贴、删除（{backspace}）、快捷键等，如需更精细控制可传入 { delay: 100 } 模拟打字节奏。