我正在尝试测试 onClick 事件是否会更改此组件中的 imageName:
<Button
Component={useAnchorTag ? "a" : "button"}
{...btnProps}
>
{content}
{showCaretIcon && (
<Icon
Component="span"
imageName={`icon-${drawerIsOpen ? "up" : "down"}`}
/>
)}
</Button>
OnClick 事件是从父组件传递给 btnProps 的,也可以从一个项目传递,所以最初我有 2 个函数 onClick 事件。
这是我的测试:
test("can render footer link with an icon up", () => {
matchMedia.match("lg");
card.moreInfoContent = [{
content: "View More",
showCaretIcon: true,
onClick: e => {
e.preventDefault();
console.log("Clicked")
}
}];
const instance = mount(<CollapsibleCard data={card} />);
const buttonWithIcon = instance.find(FooterLink).find('.footerLinkButton').last();
buttonWithIcon.simulate("click");
act(() => {
expect(
instance
.find(FooterLink)
.find(Button)
.find(Icon)
.prop("imageName")
).toBe("icon-up");
});
});
所以看起来当我将模拟 onClick 添加到 moreInfoContent 时,默认的 onClick 函数被覆盖,我不知道如何避免它。默认函数是一个将 drawerIsOpen
设置为 true 的钩子。我做错了什么吗?