From 785dd47937cba9892079275b690e6798303b5246 Mon Sep 17 00:00:00 2001
From: Dallon Feldner <dallonf@users.noreply.github.com>
Date: Thu, 25 Apr 2019 16:35:03 -0500
Subject: [PATCH] Generate SVG component name in Jest fileTransform (#6706)

---
 .../config/jest/fileTransform.js              | 27 ++++++++++++-------
 packages/react-scripts/package.json           |  1 +
 2 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/packages/react-scripts/config/jest/fileTransform.js b/packages/react-scripts/config/jest/fileTransform.js
index 4ed6bdb005d..74dc1aa947e 100644
--- a/packages/react-scripts/config/jest/fileTransform.js
+++ b/packages/react-scripts/config/jest/fileTransform.js
@@ -1,6 +1,7 @@
 'use strict';
 
 const path = require('path');
+const camelcase = require('camelcase');
 
 // This is a custom Jest transformer turning file imports into filenames.
 // http://facebook.github.io/jest/docs/en/webpack.html
@@ -10,19 +11,27 @@ module.exports = {
     const assetFilename = JSON.stringify(path.basename(filename));
 
     if (filename.match(/\.svg$/)) {
+      // Based on how SVGR generates a component name:
+      // https://github.com/smooth-code/svgr/blob/01b194cf967347d43d4cbe6b434404731b87cf27/packages/core/src/state.js#L6
+      const pascalCaseFileName = camelcase(path.parse(filename).name, {
+        pascalCase: true,
+      });
+      const componentName = `Svg${pascalCaseFileName}`;
       return `const React = require('react');
       module.exports = {
         __esModule: true,
         default: ${assetFilename},
-        ReactComponent: React.forwardRef((props, ref) => ({
-          $$typeof: Symbol.for('react.element'),
-          type: 'svg',
-          ref: ref,
-          key: null,
-          props: Object.assign({}, props, {
-            children: ${assetFilename}
-          })
-        })),
+        ReactComponent: React.forwardRef(function ${componentName}(props, ref) {
+          return {
+            $$typeof: Symbol.for('react.element'),
+            type: 'svg',
+            ref: ref,
+            key: null,
+            props: Object.assign({}, props, {
+              children: ${assetFilename}
+            })
+          };
+        }),
       };`;
     }
 
diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json
index df111a4611a..c068f4bdd16 100644
--- a/packages/react-scripts/package.json
+++ b/packages/react-scripts/package.json
@@ -37,6 +37,7 @@
     "babel-loader": "8.0.5",
     "babel-plugin-named-asset-import": "^0.3.2",
     "babel-preset-react-app": "^8.0.0",
+    "camelcase": "^5.2.0",
     "case-sensitive-paths-webpack-plugin": "2.2.0",
     "css-loader": "2.1.1",
     "dotenv": "6.2.0",