Jest测试运行耗时过长：重复表单操作代码的优化提速咨询

首先要明确一个核心前提：React Testing Library默认会在每个测试用例执行完成后，自动调用cleanup()清空页面上渲染的DOM节点，因此直接把DOM查询结果做全局缓存、只执行一次查询复用的方案是不可行的——缓存拿到的都是已经被销毁的游离节点，后续操作要么直接报错，要么根本触发不了组件的状态更新，反而会引入不稳定的测试结果。

基于这个前提，你可以通过以下几种方式在保证测试隔离性的前提下，把重复逻辑全部抽离，把单测运行时长压到合理范围：

1. 抽离公共的表单填充工具函数 #

把原来每个用例里重复的元素查询、输入操作逻辑封装成独立的可复用函数，替代十几行重复的样板代码，同时保证每次用例渲染完组件后，再执行查询拿到实时有效的DOM引用。

async function fillRegistrationForm(overrideValues = {}) {
  // 定义默认填充值，支持后续用例传参覆盖个别字段
  const defaultValues = {
    firstName: 'TestingFirstName',
    lastName: 'TestingLastName',
    email: 'testing@email.com',
    password: 'Password123',
    confirmPassword: 'Password123',
    telephone: '07888888888'
  }
  const finalValues = { ...defaultValues, ...overrideValues }

  // 元素查询逻辑
  const form = screen.getByTestId(elements.form)
  const firstNameInput = screen.getByTestId(elements.firstName)
  const lastNameInput = screen.getByTestId(elements.lastName)
  const emailInput = screen.getByTestId(elements.email)
  const passwordInput = screen.getByTestId(elements.password)
  const confirmPasswordInput = screen.getByTestId(elements.confirmPassword)
  const telephoneInput = screen.getByTestId(elements.telephone)
  const dobDayOption = screen.getByRole('option', { name: '05' })
  const dobMonthOption = screen.getByRole('option', { name: 'April' })
  const dobYearOption = screen.getByRole('option', { name: '1990' })

  // 用户操作逻辑
  await userEvent.type(firstNameInput, finalValues.firstName)
  await userEvent.type(lastNameInput, finalValues.lastName)
  await userEvent.type(emailInput, finalValues.email)
  await userEvent.type(passwordInput, finalValues.password)
  await userEvent.type(confirmPasswordInput, finalValues.confirmPassword)
  await userEvent.type(telephoneInput, finalValues.telephone)
  await userEvent.click(dobDayOption)
  await userEvent.click(dobMonthOption)
  await userEvent.click(dobYearOption)

  // 返回查询到的元素引用，供后续用例做断言、触发其他操作使用
  return {
    form,
    firstNameInput,
    lastNameInput,
    emailInput,
    passwordInput,
    confirmPasswordInput,
    telephoneInput
  }
}

2. 借助测试钩子自动执行前置逻辑 #

如果同一个describe块下的所有用例，前置操作都是「渲染注册组件 + 填充合法表单」，完全可以把这部分逻辑放到beforeEach钩子中自动执行，不用在每个测试用例里手动写调用：

describe('注册表单模块测试', () => {
  beforeEach(async () => {
    // 自动执行原来重复写的组件渲染逻辑
    render(<RegistrationForm />)
    // 自动执行表单填充逻辑
    await fillRegistrationForm()
  })

  // 后续每个测试用例只需要写核心的断言逻辑即可
  test('提交按钮在表单填充完成后变为可点击状态', async () => {
    expect(screen.getByTestId('submit-btn')).not.toBeDisabled()
  })

  test('密码不一致时提交按钮保持禁用', async () => {
    // 需要修改填充值时，直接在钩子执行完成后传参覆盖即可
    await fillRegistrationForm({ confirmPassword: 'WrongPassword' })
    expect(screen.getByTestId('submit-btn')).toBeDisabled()
  })
})

3. 针对性解决单测运行慢的核心问题 #

你现在观察到的单个用例运行耗时7-10秒，很大概率来自userEvent的默认配置开销，和重复逻辑关系不大：

• 默认配置下userEvent.type会模拟真实的逐字符输入间隔，每输入一个字符就等待10ms，单次填充6个输入框累计近百个字符，仅等待延迟就会占用1秒以上的时间，加上RTL内置的异步状态检测，整体耗时会被进一步拉长。
• 优化方式：初始化userEvent时配置delay: 0关闭逐字符的等待延迟，在不需要测试逐字符输入触发的实时校验、防抖逻辑的场景下，仅这一步就能把输入操作的耗时降低90%以上。

注意：如果你的测试需要验证“输入过程中实时触发校验”的场景，可以单独为这类用例开启逐字符延迟，其他不需要模拟真实输入节奏的用例全部使用零延迟配置，平衡测试真实性和运行速度。

关于缓存DOM引用的补充说明 #

不要为了减少重复查询刻意关闭RTL的自动清理机制做全局DOM缓存：关闭自动清理后，不同测试用例的DOM会残留在同一个页面环境中，很容易出现元素选择匹配错误、测试结果互相污染的问题，排查这类问题的时间成本远高于重复执行几次DOM查询的开销。

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