Generate SVG component name in Jest fileTransform

Created by: dallonf

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)>
`;