[英]Using jQuery and JavaScript, how do I distinguish between two XML levels that have the same Name attr?
[英]How do I distinguish between the two of these elements using Enzyme?
我有以下两个从 React Material UI 生成的代码块,它们都包含在我自己编写的更大的 React 元素中。
<InputAdornment muiFormControl={{...}} position="end" classes={{...}} component="div" disablePointerEvents={false} disableTypography={false}>
<div className="MuiInputAdornment-root-35 MuiInputAdornment-positionEnd-38 Hook-searchFieldInputAdornmentStyle-1adbbdv">
<pure(SearchIcon)>
<SearchIcon>
<WithStyles(SvgIcon)>
<SvgIcon classes={{...}} color="inherit" component="svg" fontSize="default" viewBox="0 0 24 24">
<svg className="MuiSvgIcon-root-40" focusable="false" viewBox="0 0 24 24" color={[undefined]} aria-hidden="true" role="presentation">
<path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" />
<path fill="none" d="M0 0h24v24H0z" />
</svg>
</SvgIcon>
</WithStyles(SvgIcon)>
</SearchIcon>
</pure(SearchIcon)>
</div>
</InputAdornment>
和
<InputAdornment muiFormControl={{...}} position="end" classes={{...}} component="div" disablePointerEvents={false} disableTypography={false}>
<div className="MuiInputAdornment-root-35 MuiInputAdornment-positionEnd-38">
<pure(ExpandLessIcon)>
<ExpandLessIcon>
<WithStyles(SvgIcon)>
<SvgIcon classes={{...}} color="inherit" component="svg" fontSize="default" viewBox="0 0 24 24">
<svg className="MuiSvgIcon-root-40" focusable="false" viewBox="0 0 24 24" color={[undefined]} aria-hidden="true" role="presentation">
<path d="M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z" />
<path fill="none" d="M0 0h24v24H0z" />
</svg>
</SvgIcon>
</WithStyles(SvgIcon)>
</ExpandLessIcon>
</pure(ExpandLessIcon)>
</div>
</InputAdornment>
唯一重要的区别是一个包含SearchIcon
,另一个包含ExpandLessIcon
我想使用 Enzyme 找到带有SearchIcon
的那个。 到目前为止我有以下内容
wrapper.find(InputAdornment).containsNode(SearchIcon)但它给了我以下错误
ReferenceError: SearchIcon
未定义
我应该补充一点, SearchIcon
不是我的组件,它是由 material-ui 动态生成的,所以我无法引用它的类型。
知道我应该如何调整我的酶查询吗?
.containsNode()
需要像<div />
这样的 React 元素,而不是像div
这样的 React 组件。
您可以在find
中使用 displayName ,例如获取SearchIcon
元素:
expect(wrapper.find(InputAdornment).find('SearchIcon')).toHaveLength(1)
或包含InputAdornment
的SearchIcon
:
expect(
wrapper.find(InputAdornment).filterWhere(x => x.find('SearchIcon').exists())
).toHaveLength(1)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.