Jest单元测试-如何模拟表行图标的点击事件

Question

我将如何编写jest/酶单元测试来模拟行图标的单击处理程序，该图标仅在悬停在[或]单击表行时显示。

**code that I tried given below:-**
let wrapper = mount(<TableComponent {...mockData} />);
wrapper.find('.table-row').simulate('click');

wrapper.find('.row-action-icon').simulate('click')//由于行操作图标未附加到DOM 而失败

有人能帮我解决这个问题吗？

Answer 1

我为上述场景找到了解决方案。它可能会帮助

1) Mocking the component using jest mount.
const wrapper = mount(<TableComponent {...mockData} />);
2) Trigger a mounse enter for the table row.
wrapper.find('.table__body__row').at(0).props().onMouseEnter();
3) Update the wrapper. It will intern update the DOM and insert the row icon.
wrapper.update();

4) Finally we can perform the action for the row icon
wrapper.find('.row-actions-menu__trigger').simulate('click');

• 类似地，我们可以使用"测试库/反应"；；

  const { container } = render(<TableComponent {...mockTableData} />);
  fireEvent.mouseOver(container.querySelector(".table__body__row"));
  const menuIcon = container.querySelector(".row-actions-menu__trigger");
  fireEvent.click(menuIcon);
  expect(menuIcon).not.toBeNull();