Jest Transformation Issue with SVG Imports in Next.js Project with SWC

[behnamazimi]

Summary

Jest seems to be unable to transform SVG imports correctly, resulting in an error message that says:

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

Details:

I am currently migrating a Next.js project from Babel to SWC. However, I encountered an issue when using Jest for testing. Jest is not transforming SVG imports correctly, resulting in an object instead of the expected SVG component. The error message I receive is:

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

here's an example of the SVG import I am using:

import RemoveIcon from "@fortawesome/fontawesome-pro/svgs/regular/times-circle.svg";

and transform result looks like this when I log "RemoveIcon" after import and run jest:

{
  src: '/img.jpg',
  height: 40,
  width: 40,
  blurDataURL: 'data:image/png;base64,imagedata'
}

What I tried

I attempted to address this issue by using the jest-svg-transformer and adding a custom transform option for svg files in my jest.config.js file. Neither of these approaches worked.

I also tried to mock the "@FortAwesome" module like below, but it does not work either.

jest.mock("@fortawesome/fontawesome-pro", () => ({
  svgs: "",
}));

If necessary, please let me know if there are any additional details or code samples I can provide to assist in troubleshooting this issue.

Thank you in advance for your attention and support.

Additional information

No response

Example

No response

[icyJoseph]

Ah, IIRC, you have to do a small bypass in the jest.config.js:

const nextJest = require("next/jest");

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

/** @type {import('jest').Config} */
const customJestConfig = {
  setupFilesAfterEnv: ["<rootDir>/jest.setup.ts"],
  moduleNameMapper: {
    "^@/(.*)$": "<rootDir>/src/$1",
  },
  // Since Jest 28, IIRC, this has to be installed separately
  testEnvironment: "jest-environment-jsdom",
};

const jestConfigWithOverrides = async (...args) => {
  const fn = createJestConfig(customJestConfig);
  const res = await fn(...args);

  res.moduleNameMapper = {
    "\\.svg": "<rootDir>/src/__mocks__/svgrMock.js",
    ...res.moduleNameMapper,
  };

  return res;
};

module.exports = jestConfigWithOverrides;

For example, something like this, where the svgMock.js is:

export const ReactComponent = "div";
// eslint-disable-next-line import/no-anonymous-default-export
const SvgUrl = () => "svgrurl";
export default SvgUrl;

It is not exactly what you need I think, but it is along the lines.

[bdmtnz]

Thanks bro