javascript - 如何使用 enzyme 区分这两种元素？

Question

我有以下两个从 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)

but it gives me the following error

ReferenceError:SearchIcon 未定义

我应该补充一点，SearchIcon不是我的组件，而是由material-ui动态生成的，所以我无法引用它的类型。

知道我应该如何调整我的 enzyme 查询吗？

Answer 1

.containsNode()需要像 <div /> 这样的 React 元素，而不是像 div 这样的 React 组件.

您可以在find中使用显示名称，例如获取SearchIcon元素:

expect(wrapper.find(InputAdornment).find('SearchIcon')).toHaveLength(1)

或InputAdornment包含SearchIcon :

expect(
  wrapper.find(InputAdornment).filterWhere(x => x.find('SearchIcon').exists())
).toHaveLength(1)