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",