https://stackoverflow.com/questions/71838932/react-jsx-type-is-invalid-when-testing-a-react-component-with-an-svg-with-jest

apple-touch-icon@2.png

I have a Next.js 12.1.4 project using Typescript, React Testing Library and SVGR for importing icons like this: import ChevronLeftIcon from './chevron-left.svg'

The issue I have is that when I run a test of a component that include an SVG import, I get the following error:

console.error
    Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.

    Check the render method of `Loader`.
        at Loader (.../src/components/atoms/Loader/Loader.tsx:11:36)
        at div
        at button
        at Button (.../src/components/atoms/buttons/Button/Button.tsx:19:5)

      15 |         }`}
      16 |     >
    > 17 |         <LoaderIcon />
         |                       ^
      18 |     </div>
      19 | )
      20 |

      at printWarning (node_modules/react/cjs/react-jsx-runtime.development.js:117:30)
      at error (node_modules/react/cjs/react-jsx-runtime.development.js:93:5)
      at jsxWithValidation (node_modules/react/cjs/react-jsx-runtime.development.js:1152:7)
      at Object.jsxWithValidationDynamic [as jsx] (node_modules/react/cjs/react-jsx-runtime.development.js:1209:12)
      at Loader (src/components/atoms/Loader/Loader.tsx:17:23)
      at renderWithHooks (node_modules/react-dom/cjs/react-dom.development.js:14985:18)
      at mountIndeterminateComponent (node_modules/react-dom/cjs/react-dom.development.js:17811:13)

I run tests with yarn test which matches the following script from my package.json: "test": "TZ=UTC ./node_modules/jest/bin/jest.js",

Here is what I have in next.config.js for SVGR:

webpack(config) {
    config.module.rules.push({
        test: /\\.svg$/,
        use: ['@svgr/webpack'],
    })

    return config
},

Here is my jest.config.js:

const nextJest = require('next/jest')
const createJestConfig = nextJest({
  dir: './',
})

const customJestConfig = {
  moduleDirectories: ['node_modules', '<rootDir>/src/'],
  testEnvironment: 'jest-environment-jsdom',
  moduleNameMapper: {
    '\\\\.svg$': '<rootDir>/src/__mocks__/svgrMock.tsx',
  },
}

module.exports = createJestConfig(customJestConfig)

and src/__mocks__/svgrMock.tsx

import React, { SVGProps } from 'react'

const SvgrMock = React.forwardRef<SVGSVGElement, SVGProps<SVGSVGElement>>(
    (props, ref) => <svg ref={ref} {...props} />,
)

SvgrMock.displayName = 'SvgrMock'

export const ReactComponent = SvgrMock
export default SvgrMock

I also tried to use jest-svg-transformer without much success.

Here are the versions of the libraries involved: