MUI TextField在RTL测试中填充值后调试不显示问题求助

根因分析 #

你的组件中，TextField仅在onChange事件里更新了state，但没有将state绑定到TextField的value属性，导致DOM层面的输入框不会同步渲染输入值。虽然RTL的toHaveValue断言能通过（因为它模拟了用户输入的交互状态），但实际DOM中并未渲染出值，所以screen.debug()和jest-preview看不到内容。

另外测试代码存在小问题：已经通过userEvent.setup()创建了user实例，应该用user.type()而非直接调用userEvent.type()。

修复步骤 #

1. 将组件改为受控组件 #

给TextField添加value={variable}，让组件状态和输入框值双向绑定：

import React, { useState } from "react";
import TextField from "@mui/material/TextField";

export default function MuiMock() {
    const [variable, setVariable] = useState("");   

    return (
        <TextField
            margin="normal"
            required
            fullWidth
            id="username"
            label="Username"
            name="username"
            autoComplete="username"
            autoFocus
            value={variable} // 新增：绑定状态到输入框值
            onChange={(e) => {console.log('changed!'); setVariable(e.target.value)}}
        />
    );
}

2. 修正测试代码的userEvent调用 #

使用创建好的user实例调用type方法：

import { debug } from "jest-preview";
import React from "react";
import { screen, render, fireEvent } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import MuiMock from "./Mock";

it("mock test", async () => {
    const user = userEvent.setup();
    render(
        <React.StrictMode>
            <MuiMock/>
        </React.StrictMode>
    );

    const usernameInput = screen.getByRole("textbox", { name: "Username" });    
    expect(usernameInput).toBeInTheDocument();
    await user.type(usernameInput, "Jay"); // 改为使用user实例调用type
    expect(usernameInput).toHaveValue("Jay");
    screen.debug(usernameInput); // 指定目标元素，精准查看DOM
    debug();    
});

额外调试技巧 #

如果想查看更详细的DOM结构，可给screen.debug()传参数：

• screen.debug(usernameInput)：仅打印目标输入框的DOM结构
• screen.debug(undefined, { expand: true })：展开所有嵌套DOM元素，能看到MUI内部真实的<input>标签

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