Fix svgr in storybook & jest (#1428)

* fix svg loader

* added Logo component to be able to test storybook

* added svg mock for svgr as suggested (still not working)

* package cleanup

* make svg moduleNameMapper match first

* cleanup

Co-authored-by: Matthias Kretschmann <m@kretschmann.io>

Author: EnzoVezzaro

.jest/__mocks__/svgrMock.tsx

@@ -0,0 +1,10 @@
+import React, { SVGProps } from 'react'
+
+const SvgrMock = React.forwardRef<SVGSVGElement, SVGProps<SVGSVGElement>>(
+  (props, ref) => <svg ref={ref} {...props} />
+)
+
+SvgrMock.displayName = 'SvgrMock'
+
+export const ReactComponent = SvgrMock
+export default SvgrMock

.jest/jest.config.js

@@ -14,6 +14,7 @@ const customJestConfig = {
   moduleDirectories: ['node_modules', '<rootDir>/src'],
   testEnvironment: 'jest-environment-jsdom',
   moduleNameMapper: {
+    '\\.svg': '<rootDir>/.jest/__mocks__/svgrMock.tsx',
     // '^@/components/(.*)$': '<rootDir>/components/$1',
     '@shared(.*)$': '<rootDir>/src/components/@shared/$1',
     '@hooks/(.*)$': '<rootDir>/src/@hooks/$1',

.storybook/main.js

@@ -14,21 +14,26 @@ module.exports = {
     ]
 
     // Mimic next.config.js webpack config
-    config.module.rules.push(
-      {
-        test: /\.svg$/,
-        issuer: /\.(tsx|ts)$/,
-        use: [
-          { loader: require.resolve('@svgr/webpack'), options: { icon: true } }
-        ]
-      },
-      {
-        test: /\.gif$/,
-        // yay for webpack 5
-        // https://webpack.js.org/guides/asset-management/#loading-images
-        type: 'asset/resource'
-      }
+    config.module.rules.push({
+      test: /\.gif$/,
+      // yay for webpack 5
+      // https://webpack.js.org/guides/asset-management/#loading-images
+      type: 'asset/resource'
+    })
+
+    // Modify storybook's file-loader rule to avoid conflicts with svgr
+    const fileLoaderRule = config.module.rules.find(
+      (rule) => rule.test && rule.test.test('.svg')
     )
+    fileLoaderRule.exclude = /\.svg$/
+
+    config.module.rules.push({
+      test: /\.svg$/,
+      issuer: /\.(tsx|ts)$/,
+      use: [
+        { loader: require.resolve('@svgr/webpack'), options: { icon: true } }
+      ]
+    })
 
     const fallback = config.resolve.fallback || {}
     Object.assign(fallback, {

package-lock.json

@@ -118,7 +118,6 @@
     "process": "^0.11.10",
     "serve": "^13.0.2",
     "stream-http": "^3.2.0",
-    "ts-jest": "^28.0.2",
     "tsconfig-paths-webpack-plugin": "^3.5.2",
     "typescript": "^4.6.4"
   },

package.json

@@ -0,0 +1,20 @@
+import React from 'react'
+import { ComponentStory, ComponentMeta } from '@storybook/react'
+
+import Logo, { LogoProps } from '@shared/atoms/Logo'
+
+export default {
+  title: 'Component/@shared/atoms/Logo',
+  component: Logo
+} as ComponentMeta<typeof Logo>
+
+const Template: ComponentStory<typeof Logo> = (args) => <Logo {...args} />
+
+interface Props {
+  args: LogoProps
+}
+
+export const Primary: Props = Template.bind({})
+Primary.args = {
+  noWordmark: true
+}