在玩笑测试中在 Material UI Select 上触发 mousedown 事件时，我总是收到“anchorEl”警告

Posted 2023-02-22

【中文标题】在玩笑测试中在 Material UI Select 上触发 mousedown 事件时，我总是收到“anchorEl”警告

【英文标题】：When firing mousedown event on Material UI Select in jest tests I always get "anchorEl" warning

【发布时间】：2021-06-02 16:09:38

【问题描述】：

Jest 测试代码：

import  fireEvent  from "@testing-library/react"
// some code
fireEvent.mouseDown(container.querySelector("#section")!)

React 组件被测代码：

import  Select  from "@material-ui/core"
// some code
<Select id="section"> // some props omitted
  <MenuItem>...</MenuItem>
  <MenuItem>...</MenuItem>
</Select>

代码确实有效，“mousedown”事件会产生预期的效果（“click”事件不会，但这不是重点）

但是每次运行时，我都会在输出中看到这个警告：

警告：失败的道具类型：Material-UI：提供的 anchorEl 道具 对组件无效。 锚元素应该是文档布局的一部分。 确保该元素存在于文档中或不显示任何元素。

有什么办法可以解决这个警告吗？

【问题讨论】：

我刚刚在 create-react-app 应用程序中尝试了您的简单示例，测试通过时我没有收到警告。

@RomanMkrtchian 我想我发现了错误。我在 package.json“scripts:test”属性中将环境变量 NODE_ENV 设置为“Test”（大写 T，NODE_ENV=Test）。这绝对是一个错误。我一取消设置，警告就消失了。

【参考方案1】：

在我的 package.json，sctipts -> 测试中，我在 jest 命令之前有“NODE_ENV=Test”。这不对，应该是“测试”，反正也没必要。

我删除了“NODE_ENV=Test”，问题就消失了。