React Testing Library中UserEvent.type无法正常工作的问题

问题原因分析 #

从你提供的代码来看，有两个核心问题导致输入不生效：

1. 组件内textarea未做受控绑定 #

你的LoginPage组件里，textarea仅设置了onChange事件，但没有将value属性与state中的input变量绑定。这会导致：

• 虽然handleInput会更新state，但textarea的DOM内容不会同步更新
• 测试中调用userEvent.type后，DOM上看不到输入的文本

2. UserEvent v14+ API使用错误 #

你使用的@testing-library/user-event是v14.2.1，这个版本开始需要先通过setup()创建用户实例，再调用实例方法，而不是直接调用静态方法userEvent.type。

解决方案 #

步骤1：修复组件的textarea绑定 #

将组件中的textarea修改为受控组件，绑定value属性：

<textarea
    placeholder="enter your private key here."
    onChange={handleInput}
    value={input} // 新增这一行，绑定到state的input变量
/>

步骤2：修正测试代码的UserEvent用法 #

更新测试代码，先创建user实例再调用type方法：

import userEvent from '@testing-library/user-event';

test('LoginPage should handle events properly', async () => {
    const user = userEvent.setup(); // 创建user实例
    render(<LoginPage />)
    const textbox = screen.getByRole(/textbox/i)
    await user.type(textbox, 'test') // 使用实例的type方法
    screen.debug(textbox)
})

完成以上两步后，再次运行测试，就能看到textarea中显示输入的test文本了。

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