如何使用Jest和Enzyme测试React的外部点击事件功能

时间:2019-02-10 17:57:51

标签: reactjs jestjs enzyme

我有一个组件可以检测外部点击,它的实现方式为https://medium.com/@pitipatdop/little-neat-trick-to-capture-click-outside-react-component-5604830beb7f

并且我正在使用该组件作为Dropdown组件,因此必须在外部单击时将其关闭。

我按照此评论进行了单元测试,但仍然没有运气。 https://github.com/airbnb/enzyme/issues/426#issuecomment-431195329

未捕获到外部点击,请帮助我。

我的测试用例是这样的

it("should check outside click", () => {
    const outerNode = document.createElement('div');
    outerNode.className = "outerDiv";
    document.body.appendChild(outerNode);
    wrapper = mount(<Dropdown {...props}>{props.children}</Dropdown>, { attachTo: outerNode })
    const obj = wrapper.find("button")
    obj.instance().dispatchEvent(new Event('click', { bubbles: true }));
    expect(wrapper.state().activated).toBe(true);
    outerNode.dispatchEvent(new Event('click', { bubbles: true })); // this is not working as expected
    expect(wrapper.state().activated).toBe(false);
}

未分发外部元素点击。

0 个答案:

没有答案