测试反应组件时酶 onClick 不起作用

时间:2021-01-07 20:08:28

标签: javascript reactjs unit-testing jestjs enzyme

我正在尝试测试 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 的钩子。我做错了什么吗?

0 个答案:

没有答案