I am using using enzyme and sinon, I receive this error when trying to use this test case:

Expected value to equal: true Received: false

In console when using .debug() I see:

Apparently event handler for click is not being called.

I suspect the issue could be related to .simulate('click', onLocationClick).

Could you please help me out and tell what I am doing wrong here? Thanks.

 console.log src\forecast\locationFinder\LocationFinder.test.js:28
      <Location country="CZ" id={3067696} name="Prague" onLocationClick={[Function]} />

  it('should click event', () => {
    const data = [
      {
        country: 'CZ',
        id: 3067696,
        name: 'Prague'
      },
      {
        country: 'US',
        id: 4548393,
        name: 'Prague'
      }
    ]
    const onLocationClick = sinon.spy()
    const wrapper = shallow(
      <LocationFinder
        locations={data}
        onLocationClick={onLocationClick}
    />)
    console.log(wrapper.find({ id: 3067696 }).debug())
    wrapper.find({ id: 3067696 }).simulate('click', onLocationClick)
    expect(onLocationClick.called).toEqual(true)
  })

I am using using enzyme and sinon, I receive this error when trying to use this test case:

Expected value to equal: true Received: false

In console when using .debug() I see:

Apparently event handler for click is not being called.

I suspect the issue could be related to .simulate('click', onLocationClick).

Could you please help me out and tell what I am doing wrong here? Thanks.

 console.log src\forecast\locationFinder\LocationFinder.test.js:28
      <Location country="CZ" id={3067696} name="Prague" onLocationClick={[Function]} />

  it('should click event', () => {
    const data = [
      {
        country: 'CZ',
        id: 3067696,
        name: 'Prague'
      },
      {
        country: 'US',
        id: 4548393,
        name: 'Prague'
      }
    ]
    const onLocationClick = sinon.spy()
    const wrapper = shallow(
      <LocationFinder
        locations={data}
        onLocationClick={onLocationClick}
    />)
    console.log(wrapper.find({ id: 3067696 }).debug())
    wrapper.find({ id: 3067696 }).simulate('click', onLocationClick)
    expect(onLocationClick.called).toEqual(true)
  })

• javascript
• reactjs
• sinon
• enzyme

2 Answers 2

From the official Enzyme docs:

• Currently, event simulation for the shallow renderer does not propagate as one would normally expect in a real environment. As a result, one must call .simulate() on the actual node that has the event handler set.

• Even though the name would imply this simulates an actual event, .simulate() will in fact target the ponent's prop based on the event you give it. For example, .simulate('click') will actually get the onClick prop and call it.

Keeping the above two points in mind, you can try the following:

1. Registered Events

Check if onLocationClick is registered with the click event. Does it have another event name like locationclick? Likely, it is not registered as an event at all, just a prop function.

2. Underlying Components

Does <Location /> encapsulate another ponent or element with onClick() handler defined? If yes, dive down and .find() that element via the wrapper and simulate click on it. e.g.

wrapper.find({ id: 3067696 }).dive().find('li > a').simulate('click');
expect(onLocationClick.called).toEqual(true);

Like @GibboK has done, you can also store the underlying element as a constant, and check if it exists, before simulating click.

You could consider using enzyme .dive() More info here. Which:

Shallow render the one non-DOM child of the current wrapper, and return a wrapper around the result.

Your code should looks like:

  it('should click event', () => {
    const data = [
      {
        country: 'CZ',
        id: 3067696,
        name: 'Prague'
      },
      {
        country: 'US',
        id: 4548393,
        name: 'Prague'
      }
    ]
    const onLocationClick = sinon.spy()
    const wrapper = shallow(
      <LocationFinder
        locations={data}
        onLocationClick={onLocationClick}
    />)
    const dom = wrapper.find({ id: 3067696 }).dive().find('li > a')
    expect(dom.length).toBe(1)

    dom.simulate('click')
    expect(onLocationClick.called).toEqual(true)
  })