-
-
Notifications
You must be signed in to change notification settings - Fork 32.4k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
@material-ui/icons 4.11.2 no longer has unique displayNames on icons according to enzyme .name() #23831
Comments
Regardless of being discouraged to use enzyme, is the |
Ok, I checked the source code, it is... sadly, it requires that I |
enzyme is no longer the most popular one, and has little to no traction: https://npm-stat.com/charts.html?package=%40testing-library%2Freact&package=enzyme. We have migrated most of our tests, mostly because removing shallow tests made us more efficient and mount test allows too much to hook into private component APIs.
If this works, great! We don't encourage shallow tests either, quite the opposite. Let's wait to get Sebastian's perspective on this matter. A good solution might be to revert #21134 as react dev tools are meant to be kept up to date. |
I don't know how enzyme's name() behaves these days with forwardRef and memo. Especially across various versions of React. The usual advise still stands: Don't use enzyme unless you're following a testing approach that doesn't rely on component internals. Either by following the approach explained in https://testing-library.com/docs/react-testing-library/intro or actually using Other than that I recommend rolling back to the previous version of |
FWIW, we have the same issue in our projects test suite. We rely on enzyme (I know I know), and SvgIcon displayNames. Will look at potential solutions as well. ProjectMirador/mirador#3366 |
@heath-freenome Also, could it be an issue with how enzyme computes the name? |
#21134 removed the |
I'm looking at an enzyme solution right now. Looking at: https://github.com/facebook/react/pull/18925/files "should honor a inner displayName if set on the wrapped function" Seems like enzyme should support this. |
I think this is on the right track to at least better compute the displayName the "enzyme way" enzymejs/enzyme#2482 |
From now on, I test Material UI Icons with the Icon Component directly, not with name anymore, like: import SearchIcon from '@material-ui/icons/Search';
// ...
it('should render an Icon for search', () => {
expect(wrapper.find(SearchIcon)).toHaveLength(1);
}); Also I'm using NextJS. |
Prior to 4.11.2 when I used an
enzyme
wrapper to get thename()
of an icon component, it returned the name of each component properly (i.e. theError
icon returnErrorIcon
, theAdd
icon returnedAddIcon
, etc.). Now all icons return the same name:Memo([object Object])
See the test file in an example code sandbox
Current Behavior 😯
The name of all icons in 4.11.2 is
Memo([object Object])
Expected Behavior 🤔
The name of every icon in 4.11.2 is the same as they were in 4.9.1
Steps to Reproduce 🕹
Steps:
Context 🔦
My tests for my applications are checking to see if I have the proper icon being rendered using the
name()
function on an enzyme wrapper, with this upgrade my tests are breaking.Your Environment 🌎
An example of a functioning code is found in this code sandbox with
@material-ui/icons@4.9.1
: https://codesandbox.io/s/brave-galois-hm1mfAn example of the breaking code is found in this code sandbox with
@material-ui/icons@4.11.2
: https://codesandbox.io/s/nostalgic-brahmagupta-djl98The text was updated successfully, but these errors were encountered: