时间戳

首页 > 解决方案 > Jest 模拟单击​​可能会多次呈现的组件的一个实例

javascript - Jest 模拟单击​​可能会多次呈现的组件的一个实例

问题描述

我正在尝试测试单击按钮时是否正确调用了我的 onClick 函数。但是，我的前端代码中有很多按钮都应该调用相同的函数。

目前我的测试如下所示：

function render(args, renderer = shallow) {
    const component = renderer(<MyComponent {...args} />);

    return {
      component,
      buttons: () => component.find(".button"),
    };
  }


  beforeEach(() => {
    myProps = {
      myFunction: jest.fn(),
    };
  });

  it("Should call myFunction when button is clicked", () => {
    const { buttons } = render(myProps);
    buttons().simulate("click");

    expect(myProps.myFunction).toHaveBeenCalledWith();
  });

所以在这种情况下buttons()返回几个节点，因为它正在寻找多个按钮。但是，当我打电话时simulate("click")，它只需要在一个按钮上。所以首先我尝试从列表中选择第一个：

buttons()[0].simulate("click");

但不幸的是，这似乎返回未定义，而不是我希望的第一个节点。

当它们没有任何唯一的类标识符时，如何仅指定其中一个按钮？

标签： javascriptjestjs

解决方案

在文档中进行了一些挖掘之后，我发现.first()可以在这种情况下使用它，而不是[0]但可以达到相同的结果。

buttons().first().simulate("click");

还有.last()和.at(index)在这种情况下都非常有用。

https://enzymejs.github.io/enzyme/docs/api/ReactWrapper/first.html

推荐阅读