装入父组件时如何在子组件上模拟事件？

Question

必须使用mount(<parentComp><testedComp /></parentComp>)模拟useLocation。在testedComp中，有一个我要模拟的元素（“ .tabs”）（onChange事件）。当testedComp浅呈现时，我必须进行模拟。如何从父安装组件获取浅子组件？还是在这种情况下还有另一种模拟事件的方法？就在需要时：我的testedComp是功能组件。

句柄功能：

const handleTabChange = (event: React.ChangeEvent<{}>, tab: number) => {
    console.log("test handleTabChange: " + tab);
    setCurrentTab(tab);
  };

Header组件的HTML代码：

<Tabs className="tabs" value={currentTab} onChange={handleTabChange}>
   <Tab>...</Tab>
   <Tab>...</Tab>
</Tabs>

测试代码：

wrapper = mount(
            <MemoryRouter initialEntries={["....."]}>
                <Header />
            </MemoryRouter>
        );
wrapper.find(Header).find(Tabs).simulate('change', {target: {value: 1}});
expect(wrapper.find(Header).find(Tabs).props().value).toEqual(1);

非常感谢。

Answer 1

假设类名称为.tabs的元素只有一个，则可以使用酶的find()方法来查找与所需选择器匹配的特定节点。从那里，您可以模拟click事件，它将触发绑定到该元素上click事件的方法。

const wrapper = mount(<parentComp><testedComp /></parentComp>);

wrapper.find(testedComp).find('.tabs').simulate('click');