Enzyme: find() returns more than 1 element when only 1 is in the html

[tleunen]

I'm using a code similar to this one, wrapper being a mount() element.

wrapper.find('[data-node-id="add-group-button"]')

I'm very sure that my html only contains one element with this specific attribute, but enzyme gives me a length of 3.

{
    "length": 3,
    Symbol(enzyme.__unrendered__): null,
    Symbol(enzyme.__renderer__): {
        "batchedUpdates": [Function batchedUpdates],
        "getNode": [Function getNode],
        "render": [Function render],
        "simulateEvent": [Function simulateEvent],
        "unmount": [Function unmount]
    },
    Symbol(enzyme.__root__): {
        "length": 1,
        Symbol(enzyme.__unrendered__): < Form… / > ,
        Symbol(enzyme.__renderer__): [Object],
        Symbol(enzyme.__root__): [Circular],
        Symbol(enzyme.__node__): [Object],
        Symbol(enzyme.__nodes__): [Array],
        Symbol(enzyme.__options__): [Object]
    },
    Symbol(enzyme.__node__): {
        "instance": [StatelessComponent],
        "key": ".0",
        "nodeType": "function",
        "props": [Object],
        "ref": null,
        "rendered": [Object],
        "type": [Function SubmitButton]
    },
    Symbol(enzyme.__nodes__): [
        [Object],
        [Object],
        [Object]
    ],
    Symbol(enzyme.__options__): {
        "adapter": [ReactFifteenAdapter]
    }
}

I'm not familiar with the enzyme codebase so I don't really know what's all this. Could you help me figuring out why I'm getting a length of 3? It prevents me of calling simulate on it.

[ljharb]

Is the wrapper from shallow or mount?

[tleunen]

from mount

[ljharb]

In that case, try wrapper.children().debug()?

[tleunen]

Thanks!

I see now. The attribute is set on 2 react components before being set on the dom node.
What's the best way to handle this?

[ljharb]

Instead of find, use .filterWhere and test that you have an HTML component with the proper prop, and you'll end up with a collection of 1.

[MadeoIT]

I had exactly the same problem and I have solved like this.
Instead of using mount() I have used shallow and if the node is in a sub component just just use dive()

const wrapper = shallow(<Component />);
wrapper.find('SubComponent').dive().find('div.mydiv')

I hope this will help

[ljharb]

You can also use .hostNodes() which will filter your collection down to just HTML elements.