如何在Jest测试中模拟React输入框的打字联想行为

核心逻辑梳理 #

你的组件逻辑是：当输入内容非空且长度超过2时，调用getTypeahead请求服务器数据；如果输入内容（不区分大小写）包含“some data”，会在接口返回的前10条数据后额外添加一条{name: 'test something'}的选项。要测试这个行为，需要模拟用户输入、mock服务接口，并验证最终的联想列表是否符合预期。

步骤1：修正Service的Mock逻辑 #

当前mock返回的是单个对象，但组件中使用了response.data.slice(0,10)，说明接口应该返回数组类型数据。调整mock让它返回数组，同时保留可扩展性：

jest.mock("../../service/Service", () => ({
  __esModule: true,
  default: () => ({
    getData: async (input) => ({
      // 返回测试用数组，匹配组件slice操作的逻辑
      data: [
        { name: '服务器结果1' },
        { name: '服务器结果2' }
      ],
    }),
  }),
}));

步骤2：模拟用户输入并验证结果 #

使用userEvent模拟真实输入行为，配合waitFor处理异步请求后的DOM更新，验证额外选项是否出现：

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

jest.mock("../../service/Service", () => ({
  __esModule: true,
  default: () => ({
    getData: async (input) => ({
      data: [
        { name: '服务器结果1' },
        { name: '服务器结果2' }
      ],
    }),
  }),
}));

describe('联想输入组件测试', () => {
  test('输入包含"some data"时，联想列表添加额外测试项', async () => {
    render(<Typeahead />);
    const input = screen.getByTestId('test-id');
    
    // 模拟用户输入符合条件的内容
    await userEvent.type(input, 'some data');
    
    // 等待异步请求完成，验证额外选项是否存在
    await waitFor(() => {
      expect(screen.getByText('test something')).toBeInTheDocument();
    });

    // 可选：验证服务方法是否被正确调用
    const service = require('../../service/Service').default();
    expect(service.getData).toHaveBeenCalledWith('some data');
  });
});

关键注意事项 #

• 异步处理：因为getTypeahead是异步请求，必须用waitFor或findBy*系列查询等待DOM更新，避免因联想项未渲染导致测试失败。
• Mock匹配：确保getData返回数组格式，否则slice操作会报错；如果需要测试不同输入场景，可以让mock根据传入的input参数返回对应结果。
• 行为模拟：userEvent.type比fireEvent.change更贴近真实用户输入流程（会触发input、change等多轮事件），优先使用。
• 全面验证：除了检查额外项，还可以验证接口返回的原始结果是否存在，或getData的调用次数、参数是否符合预期。

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