These are chat archives for airbnb/enzyme

4th
Feb 2016
Andrew McLagan
@andrewmclagan
Feb 04 2016 00:05
Anyone know if its possible to chain find() selectors?
Leland Richardson
@lelandrichardson
Feb 04 2016 00:05
like wrapper.find(‘.foo’).find(‘.bar’)?
Andrew McLagan
@andrewmclagan
Feb 04 2016 00:05
e.g. wrapper.find('NavItem').find('a')
yes
Leland Richardson
@lelandrichardson
Feb 04 2016 00:06
yes… but that’s equivalent to doing something like wrapper.find(‘.foo .bar’)
Andrew McLagan
@andrewmclagan
Feb 04 2016 00:06
ah i was confused by the '.foo > .bar' selector not being supported
Leland Richardson
@lelandrichardson
Feb 04 2016 00:06
(meaning, it will “find” in the subtrees of the found nodes of the first .find() call)
Andrew McLagan
@andrewmclagan
Feb 04 2016 00:07
TypeError: Enzyme received a complex CSS selector ('NavItem a') that it does not currently support
Leland Richardson
@lelandrichardson
Feb 04 2016 00:07
yeah sorry… .find(‘.foo .bar’) is not supported
Andrew McLagan
@andrewmclagan
Feb 04 2016 00:07
okay, so is it possible to chain find() ?
Leland Richardson
@lelandrichardson
Feb 04 2016 00:07
i just meant that chaining finds is equivalent to what a nested CSS selector would do if it was supported
yes
Andrew McLagan
@andrewmclagan
Feb 04 2016 00:08
ah i see :-)

well, when using react-bootstrap:

wrapper.find('NavItem').find('a').simulate('click');

I get

Error: This method is only meant to be run on single node. 0 found instead.

and i have inspected the DOM and there is an <a> element present
Leland Richardson
@lelandrichardson
Feb 04 2016 00:09
is this using shallow or mount?
Andrew McLagan
@andrewmclagan
Feb 04 2016 00:09
shallow
Leland Richardson
@lelandrichardson
Feb 04 2016 00:11
k
is the <a> being rendered in the render method of the component your testing?
or is it inside of the Navitem render method?
also might be worth it to ensure that wrapper.find(‘NavItem’) has a non-zero length
Andrew McLagan
@andrewmclagan
Feb 04 2016 00:12
Basically im trying to detect a click on a NavItem component and its just not picking it up. The actual click within the DOM is clearly bound to the child <a> element although not sure if spy will pick that up if i do wrapper.find('NavItem').simulate('click');
it is inside the NavItem
Leland Richardson
@lelandrichardson
Feb 04 2016 00:13
yah so shallow doesn’t render child components
Andrew McLagan
@andrewmclagan
Feb 04 2016 00:13
nav item looks like this <NavItem className="logIn" onClick={showForm.bind(null, FORM_LOGIN)}>Login</NavItem>
Leland Richardson
@lelandrichardson
Feb 04 2016 00:13
that’s more or less the point of shallow
you might want to try mount() instead if this is what you want to test
Andrew McLagan
@andrewmclagan
Feb 04 2016 00:13
ah ok, thats is a VERY nice tidbit to know ;-)
although knowing that, should it not detect the click event on NavItem ?? as thats where its bound to?
(see above)
Leland Richardson
@lelandrichardson
Feb 04 2016 00:14
you should be able to simulate a click in this case
Andrew McLagan
@andrewmclagan
Feb 04 2016 00:18
face slap
My bad, was calling the wrong function. Apologies "groan..."
Leland Richardson
@lelandrichardson
Feb 04 2016 00:19
:)