Add ref to jest svg transform and fix tests

packages/react-scripts/config/jest/fileTransform.js

@@ -21,10 +21,10 @@ module.exports = {
       return `module.exports = {
         __esModule: true,
         default: ${assetFilename},
-        ReactComponent: (props) => ({
+        ReactComponent: ({ svgRef, ...props }) => ({
           $$typeof: Symbol.for('react.element'),
           type: 'svg',
-          ref: null,
+          ref: svgRef || null,
           key: null,
           props: Object.assign({}, props, {
             children: ${assetFilename}

packages/react-scripts/fixtures/kitchensink/src/features/webpack/SvgComponent.js

@@ -6,10 +6,12 @@
  */
 
 import React from 'react';
-import { ReactComponent as Logo } from './assets/logo.svg';
+import { ReactComponent as Logo } from './logo.svg';
 
-export default () => <Logo id="feature-svg-component" />;
+export default () => {
+  return <Logo id="feature-svg-component" />;
+};
 
-export const SvgComponentWithRef = ({ ref }) => (
-  <Logo id="feature-svg-component-with-ref" svgRef={ref} />
+export const SvgComponentWithRef = ({ svgRef }) => (
+  <Logo id="feature-svg-component-with-ref" svgRef={svgRef} />
 );

packages/react-scripts/fixtures/kitchensink/src/features/webpack/SvgComponent.test.js

@@ -22,6 +22,6 @@ describe('svg component', () => {
     ReactDOM.render(<SvgComponentWithRef svgRef={someRef} />, div);
     const svgElement = div.getElementsByTagName('svg');
     expect(svgElement).toHaveLength(1);
-    expect(svgElement[0]).toBe(someRef);
+    expect(svgElement[0]).toBe(someRef.current);
   });
 });