Cannot find SVG icon via Enzyme
See original GitHub issueI filed this bug with Material UI, but they seem to think it’s an Enzyme bug. One of the MUI team members there commented that
It’s likely an issue with composing memo(forwardRef()).
Current behavior
Enzyme doesn’t even seem to recognize that the icon is of the type of the icon; that is,
import EditIcon from '@material-ui/icons/Edit';
console.log(mount(<EditIcon />).is(EditIcon));
displays false
. As a result, if I have an IconButton
that contains <EditIcon/>
, Enzyme doesn’t find it.
See https://codesandbox.io/s/fervent-bash-5ys2g
Expected behavior
mount(<ComponentContainingMUIIcon />).find(MUIIcon)
should return a wrapper for the icon.
Your environment
API
- shallow
- mount
- render
Version
library | version |
---|---|
enzyme | 3.9.0 |
react | 16.8.6 |
react-dom | 16.8.6 |
react-test-renderer | N/A |
adapter (below) | 1.13.2 |
Adapter
- enzyme-adapter-react-16
- enzyme-adapter-react-16.3
- enzyme-adapter-react-16.2
- enzyme-adapter-react-16.1
- enzyme-adapter-react-15
- enzyme-adapter-react-15.4
- enzyme-adapter-react-14
- enzyme-adapter-react-13
- enzyme-adapter-react-helper
- others ( )
Issue Analytics
- State:
- Created 4 years ago
- Comments:12 (6 by maintainers)
Top Results From Across the Web
Cannot find SVG icon via Enzyme · Issue #15928 - GitHub
Enzyme doesn't even seem to recognize that the icon is of the type of the icon; that is,. import EditIcon from '@material-ui/icons/Edit'; ...
Read more >Unable to find svg element for unit-testing of d3 component in ...
While unit-testing with enzyme, the find() method is unable to detect the svg element inside the div. This svg element doesn't have any...
Read more >Enzymes Icons – Download for Free in PNG and SVG - Icons8
Free Enzymes icons in various UI design styles for web, mobile. Download static and animated Enzymes vector icons for free in PNG, SVG,...
Read more >How to use SVGs in React | Sanity.io guide
There are a few ways to use an SVG in a React app: Use it as a regular image; Import it as a...
Read more >React, SVG Images and the webpack Loader to Make Them ...
Why Not Just Make It Into a PNG? Great question. The benefits of using SVGs are many, and in case you don't know,...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
as soon as i have time; hopefully today.
Perhaps a change in display name, or they changed the number of HOC wrappers on a component? Not really sure, I’m not familiar with material UI.