How to test onClick handler in React Jest + Enzyme?

user_12803314 0
Viewed 437

I know this is repeated question but the existing answers don't seem to work. So I am using styles from SemanticUI and trying to test onClick handler on one of its HTML elements

Code for Handler :

        <div className="title active" onClick={(): void => handleClick(idx)}>
          <i className="dropdown icon"></i>
          {item.title}
        </div>

Testing for this component :

  const component = <Accordion items={items} />
  it('should find onClick element', () => {
    const wrapper = mount(component)
    wrapper.find('.title-active').simulate('onClick')
  })
})

It fails with error : Method “simulate” is meant to be run on 1 node. 0 found instead.

Searching more on this issue I found out I'm not selecting the css selector correctly, which in my case I think am. How to fix this?

enzyme jestjs reactjs
1 Answers

className="title active" and .title-active will never match. Either selector should be .title.active or you missed dash in class name

In the future, just add console.log(wrapper.debug()) or use debugger in IDE and check value of wrapper.debug() in IDE debugger's console. It prints component body as a JSX and really help with debugging in such cases.

user_20716970
Related