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 jest unit 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 :)

[tobeycodes]

@cam-eo Thanks. This resolved our issue.

[MaksimAliakhnovich]

or you can use the same regex as in the next's file to overwrite their mapper. but this is not universal, it may change in the future.
although they offer to overwrite it, as they put it in a separate regex.

[danvoyce]

OMG, this just saved me from jumping out the window! Thank you!!

[Bedrock02]

^^^this just pulled me out of a hole, thank you

[zachelrath]

Thank you so much! This was the only way I could get svg tests working with Jest in Next.js.

[assainov]

^.+\\.(svg)$

[erin-fitzpatric]

THANK YOU