javascript - 如何使用 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 的产品。到目前为止，我有以下内容



ReferenceError:未定义SearchIcon
我应该补充一点SearchIcon不是我的组件，而是由material-ui动态生成的，因此我无法引用其类型。

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

最佳答案

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

您可以在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)

关于javascript - 如何使用 enzyme 区分这两个元素？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/59308881/