在父组件测试文件中模拟子组件元素点击的实现难题

我看了你的代码，这里有几个关键问题导致你无法成功模拟点击事件并验证结果，咱们一步步来修正：

问题分析 #

• Enzyme find方法使用错误：你用component.find(<Child ... />)的方式不符合Enzyme的API规范，find需要接收选择器（比如组件构造函数、CSS选择器字符串），而不是直接传入JSX元素。
• 回调函数直接执行而非传递引用：displayCardSection(CM_CARD)会在渲染阶段就立即执行，而不是等到点击事件触发时才调用，这导致card在测试刚开始就被赋值，完全不符合点击后更新的预期。
• Parent组件的回调逻辑不匹配需求：你的Parent组件里handleClick只是打印日志，没有调用displayCardSection来更新card值，这和你验证card === CM_CARD的需求完全不匹配。

修正后的代码 #

测试文件修正 #

let card; 
const displayCardSection = (cardName) => { card = cardName; }; 
describe('Parent component', () => { 
  it('simulate click event on child link', () => { 
    // 挂载Parent组件
    const component = mount(<Parent />); 

    // 直接通过CSS选择器定位子组件内的链接
    const childLink = component.find('#cm_link'); 
    expect(childLink.exists()).toBe(true); 

    // 模拟链接点击
    childLink.simulate('click'); 

    // 验证card是否被正确赋值
    expect(card).toBe(CM_CARD); 
  }) 
})

Parent组件修正（匹配验证需求） #

class Parent extends Component { 
  // 调整handleClick逻辑，触发displayCardSection并传入目标值
  handleClick = () => { 
    console.log('link clicked!'); 
    displayCardSection(CM_CARD); 
  }; 
  render() { 
    const linkText = 'Link' 
    return ( <Child linkText={linkText} onLinkClick={this.handleClick} /> ); 
  } 
}

如果希望更灵活地传递参数，也可以让Child在点击时主动传值：

Child组件调整（可选） #

function Child({linkText, onLinkClick}) { 
  // 点击时直接传递目标卡片标识
  return ( <Link id="cm_link" onClick={() => onLinkClick('CM_CARD')}>{linkText}</Link> ); 
}

对应Parent组件调整 #

class Parent extends Component { 
  // 接收Child传递的参数，再调用displayCardSection
  handleClick = (cardName) => { 
    console.log('link clicked!'); 
    displayCardSection(cardName); 
  }; 
  render() { 
    const linkText = 'Link' 
    return ( <Child linkText={linkText} onLinkClick={this.handleClick} /> ); 
  } 
}

额外测试技巧（不修改原组件逻辑） #

如果你不想改动Parent组件的实际业务代码，可以用jest mock替换掉handleClick方法：

it('simulate click event on child link', () => { 
  const mockHandleClick = jest.fn(() => displayCardSection(CM_CARD));
  // 挂载组件后替换实例的handleClick方法
  const component = mount(<Parent />); 
  component.instance().handleClick = mockHandleClick;
  component.update(); // 强制更新组件

  const childLink = component.find('#cm_link'); 
  childLink.simulate('click'); 

  expect(mockHandleClick).toHaveBeenCalled();
  expect(card).toBe(CM_CARD); 
})

这样就能正确模拟子组件链接的点击事件，并验证你的card值是否符合预期了。

内容的提问来源于stack exchange，提问作者code gig