React中userEvent.type无法输入的测试问题求助

你遇到的核心问题是：通过screen.getByTestId("productName-field")获取到的是MaterialUI TextField的外层容器元素，而非底层的<input>标签，直接访问.value自然会返回undefined。

解决方案1：从容器定位实际input元素 #

修改测试代码，从TextField容器中提取内部的input标签：

it("Should allow typing in the name field", async () => {
    const textFieldContainer = screen.getByTestId("productName-field");
    const nameField = textFieldContainer.querySelector('input');
    const yourName = "your name here";
    await userEvent.type(nameField, yourName);
    expect(nameField.value).toBe(yourName);
});

或者用Testing Library的within方法更贴合最佳实践：

import { within } from '@testing-library/react';

it("Should allow typing in the name field", async () => {
    const textField = screen.getByTestId("productName-field");
    const nameField = within(textField).getByRole('textbox');
    const yourName = "your name here";
    await userEvent.type(nameField, yourName);
    expect(nameField.value).toBe(yourName);
});

解决方案2：直接通过角色定位input #

跳过testid，直接通过输入框的角色和标签文本定位，更符合Testing Library的设计理念：

it("Should allow typing in the name field", async () => {
    const nameField = screen.getByRole('textbox', { name: /product name/i });
    const yourName = "your name here";
    await userEvent.type(nameField, yourName);
    expect(nameField.value).toBe(yourName);
});

解决方案3：验证显示值而非元素属性 #

另一种思路是验证输入内容是否正确渲染，而非直接读取元素属性：

it("Should allow typing in the name field", async () => {
    const nameField = screen.getByRole('textbox', { name: /product name/i });
    const yourName = "your name here";
    await userEvent.type(nameField, yourName);
    expect(screen.getByDisplayValue(yourName)).toBeInTheDocument();
});

为什么其他组件测试能通过？ #

大概率是你在其他组件中把data-testid直接加在了底层<input>标签上，而非MaterialUI TextField的外层容器，导致测试逻辑在其他场景下生效。

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