const AccountMenuTopBar = ({ currentUser }) => {
const { avatar = {}, username } = currentUser;
const { url = "" } = avatar;
return (
<div data-testid="accountMenuTopBar_wrapper" className={ModuleCss.accountMenuTopBatWrapper}>
<div className={ModuleCss.imageWrapper}>
<Image
width="110px"
shape="circle"
imgPath={url || userIconPlaceholder}
/>
</div>
<div data-testid="accountMenuTopBar_username" className={ModuleCss.partnerDetail}>
<TextLabel>{username}</TextLabel>
</div>
</div>
);
};
В приведенном выше коде я пытаюсь проверить, передаются ли ожидаемые реквизиты в <Image />
и <TextLabel />
с использованием библиотеки реагирующего тестирования. Хотя я могу это сделать, выполнив поиск по разметке, которую отображает <Image />
. Но теперь я обеспокоен тем, зачем указывать на разметку <Image />
, когда я пишу UT для <AccountMenuTopBar />
. Этот упомянутый сценарий можно протестировать с помощью Enzyme's .find(Image)
.
.