Enzyme: `find('Button').at(0)` does not work after updating to enzyme 3

[SandroMachado]

After updating to enzyme 3 this stoped working.

component.dive().find('Button').at(1).simulate('click');

I get TypeError: Cannot read property 'children' of undefined.

If I change to:

component.dive().find('Button').simulate('click');

I get Method “simulate” is only meant to be run on a single node. 2 found instead.

[ljharb]

Is the TypeError in the simulate call, or in the at call?

If the former, this issue should be retitled.

[ljharb]

Also, what version of react are you using? What does component look like?

[lazurey]

I have encountered exactly the same error when I upgraded react and enzyme

From: [email protected], [email protected]
To: [email protected], [email protected]

I'm using mount to test my form component ([email protected])

Other packages I have:

"react-dom": "16.0.0",
"react-test-renderer": "16.0.0",
"enzyme-adapter-react-16": "1.0.4"

I've tried at(0), first, getElement(), getElements()[0], none of them worked for me.
Could someone suggest anything else to try?
Thanks a lot!

[ljharb]

@lazurey please try react 15 with enzyme 3 first; if you upgrade both react and enzyme at the same time, it's not possible to figure out where the issue is.

[lazurey]

Hi @ljharb thanks for the quick reply.
I tried [email protected] with 3.1.1 and enzyme-adapter-react-15, and got the same errors.

 Method “simulate” is only meant to be run on a single node. 6 found instead.

Code snip:

  // simulate
  this.find(`[name="${selector}"]`).simulate('change', { target: { value: 'some_value' } });
  // mount
  handleSubmit = jest.fn();
  const ComponentToTest = () => {
    const store = configureStore(initialState);
    return (
      <MemoryRouter initialEntries={['/']}>
        <Provider store={store}>
          <SearchForm onSubmit={handleSubmit} />
        </Provider>
      </MemoryRouter>
    );
  };
  const component = mount(<ComponentToTest />);

Any ideas?

[ljharb]

try adding .hostNodes() after the find, before the simulate.

[lazurey]

Hi @ljharb .hostNodes() solved all my errors, thank you so much!

P.S. I'm on react@16 now, everything is working well, :D

[SandroMachado]

If found that diving again in the component solves the issue. This is a different behaviour from enzyme 2.

Thanks @ljharb for the help.

[wonderware]

@ljharb why does adding .hostNodes() fix this? I'm having this same issue with multiple tests, and that fix does solve it, but I can't figure out why...

[ljharb]

@wonderware in enzyme 3, .find gives both host nodes (divs and other HTML elements) and custom components. .hostNodes() filters the list to only include HTML elements.

[wonderware]

@ljharb Ah, got it! I had read that, but I think it finally clicked for me. Thanks for the explanation and the help.

[vikas199]

adding hostnodes() says that hostNode() is not a function

[ljharb]

@vikas199 it's hostNodes(), not hostNode.