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

@dallonf dallonf 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
Copy link

stale bot 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
Copy link
Contributor Author

dallonf 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
Copy link
Contributor

iansu 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
…-snapshot

# Conflicts:
#	packages/react-scripts/package.json
@dallonf
Copy link
Contributor Author

dallonf 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
@iansu
Copy link
Contributor

iansu commented Apr 25, 2019

Thanks!

@dallonf dallonf deleted the bugfix/stable-svg-snapshot branch April 26, 2019 11:32
@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.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants