Enzyme: Can't find svg elements

[fadimtr]

I'm unable to find svg elements with enzyme.
wrapper.find('svg') returns empty list.
In addition, any other attempt to find any svg related element such as text,g,rect and etc.. is failed.
all other elements found successfully.

I'm sure the problem is related to enzyme because when i look into wrapper root element html() , i can see all elements. this means jsdom rendered all the required elements correctly.

Current behavior

wrapper.find('svg') return empty list

Expected behavior

wrapper.find('svg') should return all the existing svg elements

Your environment

API

• [ ] mount

Version

| library | version
| ------------------- | -------
| enzyme | 3.7.0
| react | 16.5.2
| react-dom | 16.5.2
| jsdom | 13.0.0
| jest | 23.6.0

Adapter

• [ ] enzyme-adapter-react-16

[ljharb]

.html() invokes cheerio, so that's not particularly helpful. What does wrapper.debug() print out, and what's the component code look like?

[ljharb]

Also, which version of enzyme-adapter-react-16 are you using?

[fadimtr]

@ljharb ok after debugging i have found this:
first of all , i have tried to add an svg element to component render, and it worked I was able to locate it.

our problem is when we rendering our graphs that created with 'd3'.
in our componentDidMount function we create the graph elements and append them to a rendered element by it's ref.

componentDidMount = () => { d3.select(this.refs.arc).append('svg') }
render = () => <div ref="arc"/>

I think that somehow the wrapper doesnt identify the appended graph to the existing element.
maybe it's an issue for any type of element that appended this way , not only svg.

any suggestion how could we find this ?

Thanks

[ljharb]

There’s no good solution here, because d3 doesn’t work within the react render lifecycle. See
https://github.com/airbnb/enzyme/blob/b05147c5182159294ab07df701246af30f65910c/docs/common-issues.md#testing-third-party-libraries

If the svg elements were rendered as normal jsx, enzyme would be able to find them just fine.

[chaitanyathengdi]

To future readers,
If you're trying to find an svg element but it's returned in the render() method of a component or is a forward ref, check which type of wrapper you have. Since this element is part of rendered markup, it won't be detected by wrapper.find() of either shallow or mount wrappers. You need to use render.
Use wrapper.debug() to verify this.