From 7eed122e1af99b3d3041bb385453d52bfecb155e Mon Sep 17 00:00:00 2001
From: Bui Ngoc Nam Anh <88917321+tonible14012002@users.noreply.github.com>
Date: Fri, 9 Aug 2024 10:19:57 +0700
Subject: [PATCH] fix: generate-icons scripts wrong escape char (#39)

* fix: generate-icons scripts wrong escape char

* fix: jest test error when using Icon component
---
 .eslintrc.json        |  1 +
 __mocks__/svgrMock.js |  7 +++++++
 jest.config.js        | 16 ++++++++++++++--
 scripts/utils.js      |  2 +-
 4 files changed, 23 insertions(+), 3 deletions(-)
 create mode 100644 __mocks__/svgrMock.js

diff --git a/.eslintrc.json b/.eslintrc.json
index e6f1b59..2fdc9c6 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -16,6 +16,7 @@
     "createDefaultProgram": true
   },
   "rules": {},
+  "ignorePatterns": ["__mocks__/"],
   "overrides": [
     {
       "files": ["**/*.ts?(x)", "**/*.js?(x)"],
diff --git a/__mocks__/svgrMock.js b/__mocks__/svgrMock.js
new file mode 100644
index 0000000..05ed056
--- /dev/null
+++ b/__mocks__/svgrMock.js
@@ -0,0 +1,7 @@
+import { forwardRef } from 'react'
+
+const SvgrMock = forwardRef((props, ref) => <span ref={ref} {...props} />)
+
+export const ReactComponent = SvgrMock
+
+export default SvgrMock
diff --git a/jest.config.js b/jest.config.js
index f2abe1f..4bee72e 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -48,5 +48,17 @@ const customJestConfig = {
   coverageProvider: 'v8',
 }
 
-// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
-module.exports = createJestConfig(customJestConfig)
+const jestConfig = async () => {
+  const nextJestConfig = await createJestConfig(customJestConfig)()
+
+  return {
+    ...nextJestConfig,
+    moduleNameMapper: {
+      '\\.svg': '<rootDir>/__mocks__/svgrMock.js',
+      // Workaround to put our SVG mock first
+      ...nextJestConfig.moduleNameMapper,
+    },
+  }
+}
+
+module.exports = jestConfig
diff --git a/scripts/utils.js b/scripts/utils.js
index 1fe2aa0..ee832be 100644
--- a/scripts/utils.js
+++ b/scripts/utils.js
@@ -16,7 +16,7 @@ const generateIconComponentContent = (componentName, path) => {
     `
 // This file is generated using scripts/generate-icon-components/utils.js
 // Don't edit it manually
-import ${componentName} from '${path.replace('src/', '')}'
+import ${componentName} from '${path.replace(/\\/g, '/').replace('src/', '')}'
 
 export { ${componentName} };
 `,