Avoid jest svg failures using NextJS + @svgr/webpack

[cam-eo]

I faced this issue a lot personally whenever trying to use new versions of NextJS with Jest. All my unit tests for components that import SVGs break the tests.

For changing colours and sizes and making reusable icons (when there is no good icon library or custom icons) it is just more convenient to use SVG's as React Components

I've seen various methods of using a stub/mock for svgs in the jest config but I had trouble moving from Next 12.1.6 to anything higher.

But after much suffering I came to this solution

jest.config.ts

import nextJest from "next/jest";
import type { Config } from "@jest/types";

export const customJestConfig: Config.InitialOptions = {
  testEnvironment: "jest-environment-jsdom",
  verbose: true,
};

export const createJestConfig = nextJest({
  dir: "./",
});

const jestConfig = async () => {
  const nextJestConfig = await createJestConfig(customJestConfig)();
  return {
    ...nextJestConfig,
    moduleNameMapper: {
      // Workaround to put our SVG mock first
      "\\.svg$": "<rootDir>/__mocks__/svg.js",
      ...nextJestConfig.moduleNameMapper,
    },
  };
};

module.exports = jestConfig;

Basically once you have setup the configuration, you need to setup the mock for svg first in the config moduleNameMapper list.

The full POC can be seen here

Since I struggled so much I thought I would share to help others. If anyone has more elegant solutions I'm keen to here about it :)

[gregberge]

I think it could be helpful to post this on Next because you are actually struggling to add a moduleNameMapper, it is generic, not relative to svgr specifically.

[cam-eo]

Fair point. I will definitely do that :)