fix(jest): mock @svg/webpack transformer

While this transformer works fine in our app, it needs to be mocked in jest otherwise tests that use svg's fail.

Documentation
https://react-svgr.com/docs/jest/

Helpful debugging threads
vercel/next.js#35634 (comment)
ihttps://github.com/gregberge/svgr/issues/83#issuecomment-785996587

Author: masonmcelvain

frontend/jest.config.js

@@ -25,20 +25,22 @@ const customJestConfig = {
    transform: {
       '.+\\.(css|style|less|sass|scss)$': 'jest-css-modules-transform',
    },
-   transformIgnorePatterns: [],
    watchPlugins: [
       'jest-watch-typeahead/filename',
       'jest-watch-typeahead/testname',
    ],
 };
 
-const asyncConfig = createJestConfig(customJestConfig);
-
 module.exports = async () => {
-   const config = await asyncConfig();
-   // next/jest ignores node_modules and allows to add more ignore patterns, but we need to override them fully to whitelist some node_modules or leave as an empty array
-   // https://github.com/vercel/next.js/blob/canary/packages/next/build/jest/jest.ts
-   config.transformIgnorePatterns = customJestConfig.transformIgnorePatterns;
-
-   return config;
+   const nextJestConfig = await createJestConfig(customJestConfig)();
+   return {
+      ...nextJestConfig,
+      moduleNameMapper: {
+         '\\.svg': '<rootDir>/tests/jest/__mocks__/svg.tsx',
+         ...nextJestConfig.moduleNameMapper,
+      },
+      // next/jest ignores node_modules and allows to add more ignore patterns, but we need to override them fully to whitelist some node_modules or leave as an empty array
+      // https://github.com/vercel/next.js/blob/canary/packages/next/build/jest/jest.ts
+      transformIgnorePatterns: [],
+   };
 };

frontend/tests/jest/__mocks__/svg.tsx

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