如何在Jest和Enzyme中获取react-semantic-ui Popup的触发元素？

我之前在测试Semantic UI React的Popup组件时也碰到过一模一样的问题，其实解决起来挺直接的——Popup组件会把你传入的trigger元素原封不动渲染到DOM里，不用绕着Popup本身找，直接定位触发元素就行。

给你分享两个实用的方案：

方法一：直接定位触发组件 #

既然你传入的trigger是<Icon name='plus' />，那在Enzyme的mount结果里，直接用组件名+属性就能精准找到它：

describe('Follow Icon', () => {
  it('should create a userItem when the follow icon is clicked', (done) => {
    const wrapper = mount(
      <MemoryRouter>
        <ItemDetails {/* 传入你的组件所需props */} />
      </MemoryRouter>
    );
    
    // 定位到触发点击的Icon元素
    const followIcon = wrapper.find('Icon[name="plus"]');
    
    // 模拟点击事件
    followIcon.simulate('click');
    
    // 这里添加你的断言逻辑，比如验证userItem是否成功创建
    // 示例：expect(wrapper.find(UserItem)).toHaveLength(1);
    
    done();
  });
});

方法二：通过Popup组件关联查找 #

如果你想明确关联到目标Popup的trigger，也可以先找到Popup组件，再在它的子元素里定位Icon：

const popup = wrapper.find('Popup');
const followIcon = popup.find('Icon[name="plus"]');
followIcon.simulate('click');

小提醒 #

• 如果你的Popup是条件渲染的，记得在查找前调用wrapper.update()确保DOM已经完成更新；
• 尽量避免依赖Popup的内部类名（比如ui-popup）去查找，用组件或明确的属性选择器更稳定，不会因为组件版本更新而失效。

内容的提问来源于stack exchange，提问作者Lennert Hofman