component.prop("id") returned with component.find("#foo")

[nikglavin]

Is this a bug report?

Yes

Environment

[email protected]

Steps to Reproduce

When a component is mounted with JSDOM the selector library does not differentiate props.id and element.id

using react router as an example

const test = mount(<Link id="foo" />)
const fooLink = test.find("#foo) <-- returns 2 nodes (<Link /> + <a>)

Expected Behavior

I would not expect a custom component with the prop id to be returned when querying with a CSS selector.

• test.findWhere(n => n.prop("id") === foo) <-- expect to return 2 nodes
• test.find("#foo") <-- expect to return a single node

[ljharb]

The selector API intentionally hits all nodes, host and composite - it's not a DOM, so the rule about "IDs are unique" doesn't really apply.

What you probably want is #1179 - ie, test.hostNodes().find('#foo')?

[nikglavin]

That will do the trick, thanks for your quick response

[ljharb]

hostNodes is now released in v3.1

[conartist6]

This just wasted several hours of my time.

[conartist6]

Isn't it pretty clearly wrong? There's one api for finding prop values, and a separate api for matching CSS selectors. Why would it be acceptable that they are mixed? A React component can't match a CSS selector because CSS selectors match html elements, which a React component isn't.

I don't disagree that the solution is to use hostNodes(), but enzyme should be doing that internally when a string selector is given to find. I'd strongly recommend that this issue be reopened.

[conartist6]

What's more, hostNodes().find("#id") doesn't even work for me. 0 results. (I had 2 results as described in this issue if i just do .find("#id"))
[email protected]
[email protected]
[email protected]
[email protected]

[ljharb]

enzyme is independent of react and of html. What would the selector api do with, say, react native?

[ljharb]

As far as the specific thing that doesn’t work for you, please file an issue and we’ll see if we can straighten it out.

[conartist6]

I have opened #1907 for the problems which occur regardless of this issue.

[conartist6]

Perhaps all that needs to be done is for there to be a convenience API, something like findHost which was a shortcut for hostNodes().find() At least having such a thing be present in documentation would give it more visibility and allow the find documentation to call out the circumstance in which using it would be appropriate.