Add forward ref to SVG Component (#5457)

* Add forward ref to SVG component

* Write proper component for the ref test

* Add ref to jest svg transform and fix tests

* Fix SVG file location

* Use proper `ref` instead of svgRef in tests

* Add ref to svgr loader

Author: GasimGasimzada

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

@@ -1,11 +1,3 @@
-// @remove-on-eject-begin
-/**
- * Copyright (c) 2014-present, Facebook, Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-// @remove-on-eject-end
 'use strict';
 
 const path = require('path');
@@ -18,18 +10,19 @@ module.exports = {
     const assetFilename = JSON.stringify(path.basename(filename));
 
     if (filename.match(/\.svg$/)) {
-      return `module.exports = {
+      return `const React = require('react');
+      module.exports = {
         __esModule: true,
         default: ${assetFilename},
-        ReactComponent: (props) => ({
+        ReactComponent: React.forwardRef((props, ref) => ({
           $$typeof: Symbol.for('react.element'),
           type: 'svg',
-          ref: null,
+          ref: ref,
           key: null,
           props: Object.assign({}, props, {
             children: ${assetFilename}
           })
-        }),
+        })),
       };`;
     }
 

packages/react-scripts/config/webpack.config.js

@@ -377,7 +377,7 @@ module.exports = function(webpackEnv) {
                     {
                       loaderMap: {
                         svg: {
-                          ReactComponent: '@svgr/webpack?-svgo![path]',
+                          ReactComponent: '@svgr/webpack?-svgo,+ref![path]',
                         },
                       },
                     },

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

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

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

@@ -7,12 +7,21 @@
 
 import React from 'react';
 import ReactDOM from 'react-dom';
-import SvgComponent from './SvgComponent';
+import SvgComponent, { SvgComponentWithRef } from './SvgComponent';
 
 describe('svg component', () => {
   it('renders without crashing', () => {
     const div = document.createElement('div');
     ReactDOM.render(<SvgComponent />, div);
     expect(div.textContent).toBe('logo.svg');
   });
+
+  it('svg root element equals the passed ref', () => {
+    const div = document.createElement('div');
+    const someRef = React.createRef();
+    ReactDOM.render(<SvgComponentWithRef ref={someRef} />, div);
+    const svgElement = div.getElementsByTagName('svg');
+    expect(svgElement).toHaveLength(1);
+    expect(svgElement[0]).toBe(someRef.current);
+  });
 });