React Testing Library中fireevent.change在父组件中失效的原因

组件结构 #

父组件代码 #

父组件从props接收onChange函数，内部渲染SingleText子组件：

<Box className={classes.formAddress}>
      <SingleText
        type="text"
        value={disabled ? block || "-" : block || ""}
       
        placeholder="Single text"
        maxCharLength={10}
        handleChange={(event) => onChangeBlock(event.target.value)}
        required={showRequiredText}
      />
    </Box>

SingleText子组件代码 #

子组件内部封装了MUI的TextField组件：

<TextField
    type='text'
    value={value ?? ""}
    onChange={(event) => handleOnChange(name || "", event)}
    onInput={(event) => {
      handleOnInput(event);
    }}
    label={placeholder}
    data-testid = "textfield"
  />

测试代码及现状 #

我编写了如下测试代码：

const inputNode = container.querySelectorAll("input")[1];

screen.debug(inputNode);
await act(async () => {
  userEvent.type(inputNode, "sdf");
})

通过screen.debug(inputNode)确认已定位到目标输入框：

<input
  aria-invalid="false"
  class="MuiInputBase-input"
  classes="[object Object]"
  maxlength="10"
  type="text"
  value="789"
/>

问题 #

使用fireevent.change无法修改输入框的值，我需要验证输入事件触发时handleChange函数是否被正确调用。

内容的提问来源于stack exchange，提问作者Mahmood Ahmed Khan