material-ui 在使用react-test-renderer进行快照测试时,出现"Unable to find the input element"错误,

z6psavjg  于 3个月前  发布在  React
关注(0)|答案(2)|浏览(46)

重复问题

  • 我搜索了现有的问题

最新版本

  • 我测试了最新版本

重现步骤 🕹

链接到实时示例: https://codesandbox.io/p/sandbox/reverent-worker-y7dtfw
步骤:

  1. 使用带有 renderInput prop 的 Autocomplete 组件,如下所示:
renderInput={(params) => (
  <Tooltip title="Tooltip">
    <TextField {...params} />
  </Tooltip>
)}
  1. 使用 "react-test-renderer": "18.2.0" 对带有此 Autocomplete 的快照进行测试

当前行为 😯

快照创建正确。
在创建快照时出现以下错误:
"MUI: 无法找到输入元素。它在预期为 HTMLInputElement 时解析为 null。
相反,Autocomplete 需要一个输入元素。
确保您已正确自定义输入组件。"

预期行为 🤔

快照创建正确。
在创建快照时没有错误。

上下文 🔦

我想自定义 Autocomplete,以便在值太长并以省略号结尾时显示输入/TextFileld值的工具提示。我认为这对用户很有用,以便在输入中截断的情况下查看完整的标签。

您的环境 🌎

npx @mui/envinfo

System:
    OS: Linux 5.15 Ubuntu 22.04.3 LTS 22.04.3 LTS (Jammy Jellyfish)
  Binaries:
    Node: 20.4.0 - ~/.nvm/versions/node/v20.4.0/bin/node
    Yarn: 1.22.4 - ~/.nvm/versions/node/v20.4.0/bin/yarn
    npm: 9.7.2 - ~/.nvm/versions/node/v20.4.0/bin/npm
  Browsers:
    Chrome: session.

使用的 Chrome 版本:版本 119.0.6045.200(官方构建)(64位)

djmepvbi

djmepvbi1#

@pgrabo 您的沙箱无法复现该问题🤔,input元素似乎已正确快照并记录到控制台:

rjee0c15

rjee0c152#

是的,它是快照并且记录得很好,但问题实际上是在执行快照时记录到控制台的错误:

MUI: Unable to find the input element. It was resolved to null while an HTMLInputElement was expected.
Instead, Autocomplete expects an input element.
Make sure you have customized the input component correctly.

您可以在上面的屏幕截图中看到此错误的最后一行。实际上,您已经重现了这个问题。
是的,您说得对,快照看起来没问题。但是为什么mui会打印出这个错误呢?
mui告诉我我误用了输入元素,我自定义它的方式是错误的:/
在我的测试环境中,任何控制台错误都会导致测试失败(尽管快照可能没问题)
这就是为什么这个错误让我担心的原因。

相关问题