Skip to content
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

Generate SVG component name in Jest fileTransform #6706

Merged
merged 2 commits into from Apr 25, 2019

Conversation

@dallonf
Copy link
Contributor

commented Mar 21, 2019

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 a displayName 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:

import React from 'react';
import { mount, configure } from 'enzyme';
import EnzymeAdapter from 'enzyme-adapter-react-16';
import { ReactComponent as SvgLogo } from './logo.svg';

configure({ adapter: new EnzymeAdapter() });

it('renders SVG snapshot', () => {
  const wrapper = mount(<SvgLogo />);
  expect(wrapper).toMatchSnapshot();
});

Which produces a snapshot that looks like this:

BEFORE:

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`renders SVG snapshot 1`] = `
<ForwardRef>
  <svg>
    logo.svg
  </svg>
</ForwardRef>
`;

AFTER:

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`renders SVG snapshot 1`] = `
<ForwardRef(SvgLogo)>
  <svg>
    logo.svg
  </svg>
</ForwardRef(SvgLogo)>
`;
@stale

This comment has been minimized.

Copy link

commented Apr 23, 2019

This pull request has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

@stale stale bot added the stale label Apr 23, 2019

@dallonf

This comment has been minimized.

Copy link
Contributor Author

commented Apr 23, 2019

I'd still like to see if this could be reviewed. I'll make some time to update with master and resolve the conflicts.

@stale stale bot removed the stale label Apr 23, 2019

@iansu

This comment has been minimized.

Copy link
Collaborator

commented Apr 24, 2019

@dallonf I think we'd still like to include this it just fell through the cracks while we were working to get 3.0 out.

@iansu iansu self-assigned this Apr 24, 2019

Merge remote-tracking branch 'upstream/master' into bugfix/stable-svg…
…-snapshot

# Conflicts:
#	packages/react-scripts/package.json
@dallonf

This comment has been minimized.

Copy link
Contributor Author

commented Apr 25, 2019

Conflicts resolved!

@iansu iansu added this to the 3.0.1 milestone Apr 25, 2019

@iansu iansu merged commit 785dd47 into facebook:master Apr 25, 2019

2 checks passed

continuous-integration/travis-ci/pr The Travis CI build passed
Details
netlify/create-react-app/deploy-preview Docs deploy preview succeeded
Details
@iansu

This comment has been minimized.

Copy link
Collaborator

commented Apr 25, 2019

Thanks!

kevinam99 added a commit to kevinam99/create-react-app that referenced this pull request Apr 26, 2019

Merge pull request #1 from facebook/master
Generate SVG component name in Jest fileTransform (facebook#6706)

@dallonf dallonf deleted the dallonf:bugfix/stable-svg-snapshot branch Apr 26, 2019

@lock lock bot locked and limited conversation to collaborators May 1, 2019

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
You can’t perform that action at this time.