Generate SVG component name in Jest fileTransform #6706
Merged
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
I noticed that in Jest, an SVG's
ReactComponent
(https://facebook.github.io/create-react-app/docs/adding-images-fonts-and-files#adding-svgs) doesn't have adisplayName
and it will appear as just<ForwardRef>
, which could be a little confusing. This is particularly noticeable in snapshot tests, particularly with Enzyme, which includes both React components and HTML elements in the resulting snapshot.This PR adds a function name generated the same way that SVGO generates component names (so it will be very close, probably the same, to the component's displayName in a production build).
Note that this adds a dependency to
camelcase
, but this is already a transitive dependency in the project (several different versions of it, in fact!), so it shouldn't actually result in any new dependencies installed.How I Tested This
I set up enzyme and jest-enzyme in the template, and wrote this test:
Which produces a snapshot that looks like this:
BEFORE:
AFTER: