Enzyme: component.find(...).first(...).simulate is not a function

[christopherdumas]

I'm trying to set up a test on a component, where there is an onClick handler on a div with a list-group-item class. Following the examples on the readme, I tried this:

import { render, shallow } from 'enzyme';
const event = {...};
const org = {...};

let component;
let signUpFor = jest.fn();
beforeEach(() => {
    component = render(
        <Event header="foo"
               {...event}
               signUpFor={signUpFor}
               reload={true}
               databaseOrg={org}/>
    );
});

it('calls signUpFor on click', () => {
    component.find('.card>.list-group>.list-group-item').first().simulate('click');
    expect(signUpFor).toHaveBeenCalled();
});

However, this results in an error message:

I've tried various permutations of line 3 in the above code snippet, among them:

1. component.find(...selector...).simulate(...)
2. component.find(...selector...).first().simulate(...)
3. component.find(...selector...).at(0).simulate(...)

None of which have worked. Is there something I'm missing?

[ljharb]

I'm confused, in your example, why would signUpFor, which is never passed anywhere in your test, be called by simulate?

How is component created? It kind of suggests you used render, which is cheerio and thus doesn't have simulate at all.

[christopherdumas]

Oh, sorry. I'll add the surrounding code to the issue. I assumed people would just assume that I've constructed a component.

[ljharb]

Yes, but enzyme itself provides three APIs for doing so, and the way one does that (including which props you pass) are often critical to solving the issue.

[christopherdumas]

Yes. I updated the code snippet above. Apparently I was using cheerio.

[ljharb]

OK, so, render doesn't have simulate - only shallow and mount do.

[christopherdumas]

Got it. Thanks!

[ChiuMungZitAlexander]

@ljharb Your comment helped me a lot. I have been confused why the console always throws error of simulate is not a function. Thanks a lot.