Continued from nextjs 14 + svgr + jest " Warning: React.jsx: type is invalid -- expected a string or a class/functionbut got: object." An error appears

[brgndyy]

I am currently converting the svg file into a component using svgr, next.js 14 and then writing test code with jest.

LoadingSpinner also uses svg files, and this part passes the test normally.

However, in the case of ModalBannerImage, it keeps saying "Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object." An error appears.

If I delete the current ModalBannerImage and run a test, it works fine.

No matter how many times I try this, the error continues to appear. Is there a solution?

Even though I was told not to use {} when importing files, the error continues to appear.

• jest.config.js

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

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

const customJestConfig = {
  setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
  testEnvironment: 'jest-environment-jsdom',
  transform: {
    '^.+\\.jsx?$': 'babel-jest',
    '^.+\\.svg$': 'jest-transformer-svg',
  },
  moduleNameMapper: {
    '\\.svg$': '<rootDir>/__mocks__/svg.js',
  },
};

module.exports = createJestConfig(customJestConfig);

• next.config.js

const { createVanillaExtractPlugin } = require('@vanilla-extract/next-plugin');

const withVanillaExtract = createVanillaExtractPlugin();

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (config, options) => {
    config.module.rules.push({
      test: /\.(wav)$/,
      use: {
        loader: 'file-loader',
        options: {
          name: '[name].[ext]',
          publicPath: `/_next/static/sounds/`,
          outputPath: `${options.isServer ? '../' : ''}static/sounds/`,
        },
      },
    });
    const fileLoaderRule = config.module.rules.find((rule) => rule.test?.test?.('.svg'));

    if (fileLoaderRule) {
      config.module.rules.push({
        ...fileLoaderRule,
        test: /\.svg$/i,
        resourceQuery: /url/, // *.svg?url
      });

      config.module.rules.push({
        test: /\.svg$/i,
        issuer: fileLoaderRule.issuer,
        resourceQuery: { not: [...fileLoaderRule.resourceQuery.not, /url/] },
        use: ['@svgr/webpack'],
      });

      fileLoaderRule.exclude = /\.svg$/i;
    }

    return config;
  },
  images: {
    domains: ['localhost'],
  },
};

module.exports = withVanillaExtract(nextConfig);

• ModalBannerImage.tsx

import DarkLoginModalBannerImage from 'public/images/svgs/DarkLoginModalImage.svg';
import WhiteLoginModalBannerImage from 'public/images/svgs/WhiteLoginModalImage.svg';
import { useAtomValue } from 'jotai';
import { themeAtom } from '@/_store/themeAtom';

export default function ModalBannerImage() {
  const darkTheme = useAtomValue(themeAtom);

  return darkTheme ? (
    <div>
      <DarkLoginModalBannerImage width={280} height={400} />
    </div>
  ) : (
    <WhiteLoginModalBannerImage width={280} height={400} />
  );
}

• LoadingSpinner.tsx

import { myStyle } from '@/_styles/vars.css';
import DarkLoadingSpinner from 'public/images/svgs/DarkLoadingSpinner.svg';
import WhiteLoadingSpinner from 'public/images/svgs/WhiteLoadingSpinner.svg';
import { useAtomValue } from 'jotai';
import { themeAtom } from '@/_store/themeAtom';
import { loadingSpinnerContainer, loadingSpinnerText } from './loadingSpinner.css';

export default function LoadingSpinner() {
  const darkTheme = useAtomValue(themeAtom);

  return (
    <div className={`${loadingSpinnerContainer} ${myStyle}`}>
      {darkTheme ? (
        <DarkLoadingSpinner width={300} height={300} />
      ) : (
        <WhiteLoadingSpinner width={300} height={300} />
      )}
      <p className={`${loadingSpinnerText} ${myStyle}`}>잠시만 기다려주세요!</p>
    </div>
  );
}

• without ModalBannerImage.tsx

• with ModalBannerImage.tsx

[icyJoseph]

Hi,

The thing is that, the Next.js Jest Config, has already an svg regex key expression in module mapper, let's call that a matcher, and then when your custom module mapper is merged in, it comes after the first matcher. Think of it like this:

// pseudo-code
moduleNameMapper: {
   'regex-that-matches-svg-by-next.js': /* code */,
   ...yourCustomConfig.moduleNameMapper,
} 

You can see that your matcher would go "after" the Next.js SVG matcher.

That means that if you knew the actual matcher used by Next.js, you could override it, object spreading normally does

const yourCustomConfig = {
   moduleNameMapper: {
      'regex-that-matches-svg-by-next.js': /* code */,
   }
} 

Then when these get merged, yours would be last, and hence, it would be the key used when matching SVG files.

const foo = { a: 0 }
const bar = { a: 100, ...foo }
bar.a // 0;

You can see where this is going, when a file is to be matched, we go through the keys in the matcher, and which ever matches first, is used. Since there's a Next.js matcher first, that'll win over yours, unless you override it, or place yourself above it...

Trying to override it, is brittle, because as soon as there's a change to it, your tests would start to break. So what if instead, we make sure our custom matcher is always first...

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

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

/** @type {import('jest').Config} */
const customJestConfig = {
  setupFilesAfterEnv: ["<rootDir>/jest.setup.ts"],
  moduleNameMapper: {
    "^@/(.*)$": "<rootDir>/src/$1",
  },
  testEnvironment: "jest-environment-jsdom",
};

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

  res.moduleNameMapper = {
    // we cannot depend on the exact key used by Next.js
    // so we inject an SVG key higher up on the mapping tree
    "\\.svg": "<rootDir>/src/__mocks__/svgrMock.js",
    ...res.moduleNameMapper,
  };

  return res;
};

module.exports = jestConfigWithOverrides;

You could also use this jestConfigWithOverrides to peek into the Next.js' moduleNameMapper, and see what SVG key they use! But it is best to not override that one, and just put another matcher higher up

[brgndyy]

Thank you very much for your sincere reply. Thanks to you, I understand what the problem is.

However, when I set it like this, it says the test passes, but now another error occurs.

    console.error
      Warning: <SvgrURL /> is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements.
          at SvgrURL
          at div

• styleMock.js

// eslint-disable-next-line import/no-anonymous-default-export
export default 'SvgrURL';
export const ReactComponent = 'div';

• 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',
  },
  testEnvironment: 'jest-environment-jsdom',
  transform: {
    '\\.css\\.ts$': '@vanilla-extract/jest-transform',
    '^.+\\.jsx?$': 'babel-jest',
    '^.+\\.svg$': 'jest-transformer-svg',
  },
};

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

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

  return res;
};

module.exports = jestConfigWithOverrides;

I did it exactly as it says in the official document. Why does this problem occur and what is the solution?

but tests success

[icyJoseph]

Yeah it is just warnings because, when React is making the DOM nodes/elements, it expects div, and family, and SvgrURL is not a known DOM node/element.

Try with:

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

[brgndyy]

Really Thanks .. really appreciate that 🥲 have a nice day!

[icyJoseph]

No worries! Please don't forget to mark as answered!

[raulvictorrosa]

It worked for me also, thank you so much @icyJoseph!!

As I'm using typescript I just wrote the files a little different, here it goes them bellow.

• jest.config.ts

// jest.config.ts
import type { Config } from 'jest';
import nextJest from 'next/jest';

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

const config: Config = {
  clearMocks: true,
  collectCoverage: true,
  coverageDirectory: 'coverage',
  coverageProvider: 'v8',
  setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
  testEnvironment: 'jsdom',
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1',
  },
};

const jestConfigWithOverrides = async () => {
  const configFn = createJestConfig(config);
  const res = await configFn();

  res.moduleNameMapper = {
    // We cannot depend on the exact key used by Next.js
    // so we inject an SVG key higher up on the mapping tree
    '\\.svg': '<rootDir>/src/__mocks__/svgrMock.ts',
    ...res.moduleNameMapper,
  };

  return res;
};

export default jestConfigWithOverrides;

• jest.setup.ts

// jest-dom adds custom jest matchers for asserting on DOM nodes.
// allows you to do things like:
// expect(element).toHaveTextContent(/react/i)
// learn more: https://github.com/testing-library/jest-dom
import '@testing-library/jest-dom';
import 'jest-styled-components';

• src/mocks/svgrMock.ts

// src/__mocks__/svgrMock.ts
export const ReactComponent = 'div';
const SvgUrl = () => 'svgrurl';
export default SvgUrl;

[jake-owen-p]

MY HERO @icyJoseph