如何在Jest测试中校验React组件useRef绑定输入框的selectionStart值

核心思路：不需要访问组件内部的useRef实例，你通过getByTestId拿到的input DOM元素本身就挂载了selectionStart和selectionEnd属性，直接断言这个DOM元素的属性即可，只需要额外处理React异步更新的等待逻辑。

首先先修正原代码里的两个笔误：SomeComonent拼写错误应为SomeComponent，someFuction拼写错误应为someFunction，否则测试无法正常运行。

修改后的测试代码示例：

import { render, fireEvent, waitFor } from '@testing-library/react'
// 导入你的SomeComponent组件

describe('SomeComponent tests', () => {
  it('should move cursor correctly', async () => {
    const { getByTestId } = render(<SomeComponent value="12/3" />)
    // 断言为HTMLInputElement避免TS类型报错
    const input = getByTestId('input-field') as HTMLInputElement

    // 可选：如果需要模拟特定的初始光标位置，可以在这里手动赋值
    // 比如下面的代码模拟初始光标在索引2的位置，正好对应示例值"12/3"里的"/"字符位置
    input.selectionStart = 2
    input.selectionEnd = 2

    fireEvent.keyDown(input, { key: '4' })

    // 等待React状态更新、useEffect执行完成后再断言
    await waitFor(() => {
      // 预期值根据你的实际业务逻辑调整即可
      expect(input.selectionStart).toEqual(3)
      expect(input.selectionEnd).toEqual(3)
    })
  })
})

注意事项 #

• 测试用例必须加async关键字，配合await waitFor处理React异步更新逻辑
• 如果你的someFunction内部是通过读取输入框当前光标位置计算caretPosition，一定要在触发keydown前设置好初始的selectionStart和selectionEnd，否则默认初始值都是0，测试场景不符合预期
• 常用的jsdom测试环境原生支持input元素的selection属性，不需要额外做兼容处理

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