question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Cannot find SVG icon via Enzyme

See original GitHub issue

I 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:closed
  • Created 4 years ago
  • Comments:12 (6 by maintainers)

github_iconTop GitHub Comments

2reactions
ljharbcommented, Jun 3, 2019

as soon as i have time; hopefully today.

0reactions
ljharbcommented, Nov 27, 2019

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.

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found