Try to test component with React generated form svgr about svgr

[marco-streng]

We created a simple mock for the svgr loader and mapped to it in the jest config:

svgrMock.js

module.exports = 'IconMock'

In your package.json e.g.

"jest": {
  "moduleNameMapper": {
    "\\.svg": "<rootDir>/__mocks__/svgrMock.js"
  }
}

Your snapshots will include all properties on the icon components, so they will be tested.

[leoendless]

module.exports = 'IconMock' not work for me.

I use svgr like this:

import { ReactComponent as Logo } from '../assets/logo.svg'

Then I changed svgrMock.js to:

module.exports = { ReactComponent: 'IconMock' }

Tests pass.

[Tonours]

Hey 👋 !

I was having issue with both solution on React 16.8.3, React warns about casing.

console.error node_modules/react-dom/cjs/react-dom.development.js:506
Warning: <IconMock /> is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements.
          in IconMock
          in div
          in Unknown (created by WrapperComponent)
          in WrapperComponent

because, tests were render something like <IconMock className="aweome-classname" /> instead of <icon-mock className="aweome-classname" />

Finally i was able to make it work with:

module.exports = { ReactComponent: 'icon-mock' }

and now everything is ok

[NoamNol]

This works for me (instead of "\\.svg$" or "^.+\\.svg")

// jest.config.js

moduleNameMapper: {
  '^.+\\.(svg)$': '<rootDir>/__mocks__/svg.js',
}
moduleDirectories: ['node_modules', '<rootDir>/']

[maximgeerinck]

If you need to support both
import logoURL from '../assets/logo.svg'
and
import { ReactComponent as Logo } from '../assets/logo.svg'
and worked for styled-components

Then your svgrMock.js should be

import React from 'react';

export default 'SvgrURL';
const SvgrMock = React.forwardRef((props, ref) => <span ref={ref} {...props} />);

export const ReactComponent = SvgrMock;

This worked, however it shows a console error message:

<SvgrURL /> is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements.

adjusting it to

import React from 'react';
 
const SvgrMock = React.forwardRef((props, ref) => <span ref={ref} {...props} />);

export const ReactComponent = SvgrMock;
export default SvgrMock;

did the trick for me

[ybentz]

If you need to support both
import logoURL from '../assets/logo.svg'
and
import { ReactComponent as Logo } from '../assets/logo.svg'
and worked for styled-components
Then your svgrMock.js should be

import React from 'react';

export default 'SvgrURL';
const SvgrMock = React.forwardRef((props, ref) => <span ref={ref} {...props} />);

export const ReactComponent = SvgrMock;

This worked, however it shows a console error message:

<SvgrURL /> is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements.

adjusting it to

import React from 'react';
 
const SvgrMock = React.forwardRef((props, ref) => <span ref={ref} {...props} />);

export const ReactComponent = SvgrMock;
export default SvgrMock;

did the trick for me

In case this helps anyone, I got this to work with Typescript like so:

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 had to also change the mock file's extension to .tsx so make sure to update the path in your Jest config moduleNameMapper accordingly

Note: The displayName part is not essential but eslint was yelling at me that Component definition is missing display name.

[gregberge]

Maybe we should add a section in the documentation to document how to test with SVGR. Does someone want to create it?

[CurtisHumphrey]

If you need to support both
import logoURL from '../assets/logo.svg'
and
import { ReactComponent as Logo } from '../assets/logo.svg'
and worked for styled-components

Then your svgrMock.js should be

import React from 'react';

export default 'SvgrURL';
const SvgrMock = React.forwardRef((props, ref) => <span ref={ref} {...props} />);

export const ReactComponent = SvgrMock;

[denisbarriere]

Hi there,
thanks a lot for providing solutions for this issue.

I am using NextJS 12.1.4 with Typescript, React Testing Library and SVGR. So I can import SVGs like this: import ChevronLeftIcon from './chevron-left.svg'

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

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 as suggested by @ybentz.

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

When running a test of a component including an SVG, 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 spent hours trying to solve this, but I couldn't find a solution that worked yet.
I am using

"react": "17.0.2",
"react-dom": "17.0.2"
"@svgr/webpack": "^5.5.0",
"@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^12.1.4",
"@testing-library/user-event": "^14.0.4",

Thanks for your help :)

[piotrooo]

I did handle with this by added following conf to the package.json:

"jest": {
  "moduleNameMapper": {
    "\\.svg": "svgr/webpack"
  }
}

But now, I have a following error when I try to render a React component inside test:

it('test', () => {
    const minimize = sinon.spy();
    const toJSON = renderer.create(<CloseBubble minimize={minimize}/>).toJSON();
    console.log(toJSON);
});

Produce following error:

  console.error ../../../node_modules/react-test-renderer/cjs/react-test-renderer.development.js:5206
    The above error occurred in the <svgrLoader> component:
        in svgrLoader (created by CloseBubble)
        in a (created by CloseBubble)
        in div (created by CloseBubble)
        in CloseBubble
    
    Consider adding an error boundary to your tree to customize error handling behavior.
    Visit https://fb.me/react-error-boundaries to learn more about error boundaries.

TypeError: Cannot read property 'async' of undefined
    at svgrLoader (/node_modules/svgr/lib/webpack.js:20:25)
    at mountIndeterminateComponent (/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:4137:15)
    at beginWork (/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:4541:16)
    at performUnitOfWork (/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7377:16)
    at workLoop (/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7406:26)
    at renderRoot (/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7437:9)
    at performWorkOnRoot (/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:8012:24)
    at performWork (/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7933:9)
    at performSyncWork (/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7910:5)
    at requestWork (/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7810:7)
    at scheduleWorkImpl (/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7685:13)
    at scheduleWork (/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7645:12)
    at scheduleRootUpdate (/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:8273:5)
    at updateContainerAtExpirationTime (/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:8301:12)
    at Object.updateContainer (/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:8328:14)
    at Object.create (/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:9009:18)
    at Object.<anonymous> (/src/components/__tests__/CloseBubble.test.js:25:29)
    at Object.asyncFn (/node_modules/jest-jasmine2/build/jasmine_async.js:82:37)
    at resolve (/node_modules/jest-jasmine2/build/queue_runner.js:52:12)
    at new Promise (<anonymous>)
    at mapper (/node_modules/jest-jasmine2/build/queue_runner.js:39:19)
    at promise.then (/node_modules/jest-jasmine2/build/queue_runner.js:73:82)
    at <anonymous>

[rwieruch]

That's too bad in my opinion. Not related to this library, but to not being able to combine Jest and Webpack. That's one of the most often used testing setups I have seen out there. It works standalone with its custom setup stuff, but now not being able to add a third-party to the combination is bad for the ecosystem, because I am just not able to test the components using SVG anymore. I try to find a solution for the Jest + Webpack problem. Thanks for your help!

Maybe keeping the issue open helps others as well. Maybe we can find a solution together!

Would be curious whether @piotrooo found a solution for it.

[bobysf12]

Does this also work with typescript?
I tried to use this configuration but it didn't work

@bobysf12 did you solve this problem and how ????

Hey @Milos5611, I added this in jest configuration

    moduleNameMapper: {
        "^.+\\.svg": "<rootDir>/src/__mocks__/svgrMock.ts",
    },

and here's the svgrMock.ts:

// @ts-ignore
import * as React from "react";
export default "SvgrURL";
export const ReactComponent = "div";

@Milos5611

[jbobd]

If you need to support both
import logoURL from '../assets/logo.svg'
and
import { ReactComponent as Logo } from '../assets/logo.svg'
and worked for styled-components
Then your svgrMock.js should be

import React from 'react';

export default 'SvgrURL';
const SvgrMock = React.forwardRef((props, ref) => <span ref={ref} {...props} />);

export const ReactComponent = SvgrMock;

This worked, however it shows a console error message:
<SvgrURL /> is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements.
adjusting it to

import React from 'react';
 
const SvgrMock = React.forwardRef((props, ref) => <span ref={ref} {...props} />);

export const ReactComponent = SvgrMock;
export default SvgrMock;

did the trick for me

In case this helps anyone, I got this to work with Typescript like so:

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 had to also change the mock file's extension to .tsx so make sure to update the path in your Jest config moduleNameMapper accordingly

Note: The displayName part is not essential but eslint was yelling at me that Component definition is missing display name.

This was the only thing that worked for me.

I am using Next.js + SVGR + typescript

thanks mate.

[mathisGuerin]

With solutions above, I can't really test that the import of my svg file is correct.
Both
import { ReactComponent as IconCorrectPath } from "@Icons/correct-path-to-my-svg.svg";
and
import { ReactComponent as IconWrongPath } from "@Icons/wrong-path.svg";
will pass the test.

What can I do if I want my test to fail when path to my svg is wrong ?
Thanks

[serhanguney]

Funny thing:
Here is my moduleNameMapper

moduleNameMapper: {
    '\\.(svg+[?]+icon)$': '<rootDir>/__mocks__/svg.tsx',
    '\\.svg$': '<rootDir>/__mocks__/svg.tsx',
    '\\.(jpg|jpeg|png|gif|webp|avif|svg+[?]+image)$': '<rootDir>/__mocks__/next/image.tsx',
    '\\.(css|sass|scss)$': '<rootDir>/__mocks__/styleMock.ts',
  },

As you can see I have two svg options point to the same config file; one for svgs with icon query, and one for files with regular svg extension.
Any svg with .svg?icon query passes the test even though both options point to the same config file __mocks__/svg.tsx

So I console logged the outcome of __mocks__/svg.tsx and here it is

-> For .svg?icon which passes the test

{
        '$$typeof': Symbol(react.element),
        type: {
          '$$typeof': Symbol(react.forward_ref),
          render: [Function (anonymous)] { displayName: 'svg' }
        },
        key: null,
        ref: null,
        props: {},
        _owner: null,
        _store: {}
}

-> For .svg which fails the test

{
        '$$typeof': Symbol(react.element),
        type: {
          src: '/img.jpg',
          height: 24,
          width: 24,
          blurDataURL: 'data:image/png;base64,imagedata'
        },
        key: null,
        ref: null,
        props: {},
        _owner: null,
        _store: {}
}

Finally here is my __mocks__/svg.tsx

import React, { SVGProps } from 'react';

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

export default SvgrMock;

export const ReactComponent = SvgrMock;

This suggests that the regular svgs (without query) do not pass through the __mocks__/svg.tsx file, therefore are not transformed into React functions and give the following error:
React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.

[rwieruch]

@piotrooo how did you fix this issue? I ran into the same thing. Adding

  "moduleNameMapper": {
    "\\.svg": "@svgr/webpack"
  }

was already helpful, but now I am stuck with the same problem. It seems like this in

function svgrLoader(source) {
  const callback = this.async();

 ...
}

is undefined for the test environment (here Jest).

PS.: Why is it so hard to simply run Jest with Webpack :(

[rwieruch]

It worked for me with the solution provided by @marco-streng Thank you!

Since everything is mocked now, I assume SVG icons will be excluded from visual regression testing now. Would be great to find a solution to still render the SVGs for these kind of tests, but I haven't found one.

[oh3vci]

Hey @denisbarriere, Try require.resolve to moduleNameMapper

moduleNameMapper: {
    '\\.svg$': require.resolve('<rootDir>/src/__mocks__/svgrMock.tsx'),
},

[Bhagyashri1808]

If you need to support both
import logoURL from '../assets/logo.svg'
and
import { ReactComponent as Logo } from '../assets/logo.svg'
and worked for styled-components
Then your svgrMock.js should be

import React from 'react';

export default 'SvgrURL';
const SvgrMock = React.forwardRef((props, ref) => <span ref={ref} {...props} />);

export const ReactComponent = SvgrMock;

This worked, however it shows a console error message:

<SvgrURL /> is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements.

adjusting it to

import React from 'react';
 
const SvgrMock = React.forwardRef((props, ref) => <span ref={ref} {...props} />);

export const ReactComponent = SvgrMock;
export default SvgrMock;

did the trick for me

This is working for me but svg component doesn't have any child components in it. It is just imported as

 <svg
                data-testid="Vessel"
                id="Vessel"
                length="inherit"
                width="inherit"
                x="0"
                y="0"
              />

It's kind of blank svg.

Please any suggestions would be appreciated.

[gregberge]

It looks like a babel-loader is missing somewhere.

[lifeiscontent]

@piotrooo I believe this is due to not having an async/await transformer in the pipeline.

[rwieruch]

Minimal application showcasing the problem: https://github.com/rwieruch/svgr-async-bug

[gregberge]

@rwieruch it is impossible to use the webpack loader in Jest, you can't do that.

I don't know what is the best option to do it but the use-case is not relative to SVGR, you should look for using webpack + Jest together. Maybe build a bundle with webpack, then using this build in Jest.

[gregberge]

Yeah I agree, but you have this problem with all Webpack loaders + Jest.

[piotrooo]

I didn't handle it at all... Workaround which works for me, generating icons while bundling project.

npm script:

"generate-icons": "node_modules/.bin/svgr --no-title src/images/ --out-dir src/icons && echo Done. Building project...",

---

Disclaimer
This is very naive way! Should be treated as a workaround not a final solution.

[rwieruch]

I need to try this! Thank you @marco-streng 💯

[hugodutra-zz]

It worked for me! 🎉 🎉 🎉
thanks @marco-streng!

[gregberge]

Thanks @leoendless, I updated the readme.

[rangle-harrynicholls]

@neoziro Whereabouts is this info in the readme? I found this thread first.

[gregberge]

I think the section has disappeared. We should add a section "Testing" on the website.

[felipediogo]

Hey !

I was having issue with both solution on React 16.8.3, React warns about casing.

console.error node_modules/react-dom/cjs/react-dom.development.js:506
Warning: <IconMock /> is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements.
          in IconMock
          in div
          in Unknown (created by WrapperComponent)
          in WrapperComponent

because, tests were render something like <IconMock className="aweome-classname" /> instead of <icon-mock className="aweome-classname" />

Finally i was able to make it work with:

module.exports = { ReactComponent: 'icon-mock' }

and now everything is ok

Thanks man, that worked like a charm, thanks a lot.

[isaachinman]

For what it's worth, identity-obj-proxy seems to work just fine for this use case.

[jhoffmcd]

@isaachinman identity-obj-proxy does work but still getting the casing warning 🤷‍♂ . I wish there was a way to configure that.

[bobysf12]

Does this also work with typescript?

I tried to use this configuration but it didn't work

[vgm106]

Does this also work with typescript?

I tried to use this configuration but it didn't work

Any luck?

[Tonours]

@vgm106 and @bobysf12 for what it worth, i'm able to make it work with this trick for TypeScript

[Milos5611]

Does this also work with typescript?

I tried to use this configuration but it didn't work

@bobysf12 did you solve this problem and how ????

[Milos5611]

Thanks @bobysf12 .
For everyone else that configuration changes don't work, I had configuration in my jest.config

 transform: {
    "^.+\\.tsx?$": "ts-jest",

but instead i should be

 "^.+\\.tsx?$": <rootDir>/node_modules/babel-jest"

[papuruth]

Mine still not solved it's throwing the following error even after mocking
Cannot create styled-component for component: undefined.

import { ReactComponent as ScreenShare } from '@/assets/icons/screenShare.svg';

Error:
When using SVG in a styled component:
Cannot create styled-component for component: undefined.
const ScreenShareIcon = styled(ScreenShare)``;

When using directly
C:\Users\d-Evil\venuiq-microsite\src\assets\icons\pip.svg:1
({"Object.":function(module,exports,require,__dirname,__filename,global,jest){
SyntaxError: Unexpected token '<'

svgrMock.js

import React from 'react';

const SvgrMock = React.forwardRef((props, ref) => <span ref={ref} {...props} />);

export const ReactComponent = SvgrMock;
export default SvgrMock;

jest.config.js

moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1',
    '\\.(css|less)$': 'identity-obj-proxy',
    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': '<rootDir>/src/__mocks__/fileMock.js',
    '\\.svg$': '<rootDir>/src/__mocks__/svgrMock.js',
  },

[jonasmarco]

module.exports = 'IconMock' not work for me.

I use svgr like this:

import { ReactComponent as Logo } from '../assets/logo.svg'

Then I changed svgrMock.js to:

module.exports = { ReactComponent: 'IconMock' }

Tests pass.

tnk you so much

[serhanguney]

Hi there, thanks a lot for providing solutions for this issue.

I am using NextJS 12.1.4 with Typescript, React Testing Library and SVGR. So I can import SVGs like this: import ChevronLeftIcon from './chevron-left.svg'

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

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 as suggested by @ybentz.

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

When running a test of a component including an SVG, 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 spent hours trying to solve this, but I couldn't find a solution that worked yet. I am using

"react": "17.0.2",
"react-dom": "17.0.2"
"@svgr/webpack": "^5.5.0",
"@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^12.1.4",
"@testing-library/user-event": "^14.0.4",

Thanks for your help :)

Having exactly the same issue, same tech stack. Any help would be much appreciated!
@oh3vci I tried what you said but getting the same error.

[ybentz]

@serhanguney I haven't migrated to Next v12 yet so I'm not talking from experience and this is just a guess. In v12.1 Next added built-in support for Jest, I'm assuming that means they added some additional transformations to handle images including SVGs among other things which is why your plain .svg files are being transformed before being passed to SVGR (I'm assuming that because of the blurDataURL field which is a Next Image component thing). I think this discussion is relevant to your issue but doesn't seem like there are any suggestions for fixes.

[racharlasrikanth]

We created a simple mock for the svgr loader and mapped to it in the jest config:

svgrMock.js

module.exports = 'IconMock'

In your package.json e.g.

"jest": {
  "moduleNameMapper": {
    "\\.svg": "<rootDir>/__mocks__/svgrMock.js"
  }
}

Your snapshots will include all properties on the icon components, so they will be tested.

We created a simple mock for the svgr loader and mapped to it in the jest config:

svgrMock.js

module.exports = 'IconMock'

In your package.json e.g.

"jest": {
  "moduleNameMapper": {
    "\\.svg": "<rootDir>/__mocks__/svgrMock.js"
  }
}

Your snapshots will include all properties on the icon components, so they will be tested.

WOW It worked for me, Thank you

[racharlasrikanth]

We created a simple mock for the svgr loader and mapped to it in the jest config:

svgrMock.js

module.exports = 'IconMock'

In your package.json e.g.

"jest": {
  "moduleNameMapper": {
    "\\.svg": "<rootDir>/__mocks__/svgrMock.js"
  }
}

Your snapshots will include all properties on the icon components, so they will be tested.

We created a simple mock for the svgr loader and mapped to it in the jest config:

svgrMock.js

module.exports = 'IconMock'

In your package.json e.g.

"jest": {
  "moduleNameMapper": {
    "\\.svg": "<rootDir>/__mocks__/svgrMock.js"
  }
}

Your snapshots will include all properties on the icon components, so they will be tested.

WOW It worked for me, Thank you

[rizbud]

This works for me (instead of "\\.svg$" or "^.+\\.svg")

// jest.config.js

moduleNameMapper: {
  '^.+\\.(svg)$': '<rootDir>/__mocks__/svg.js',
}
moduleDirectories: ['node_modules', '<rootDir>/']

Thank you, it works for me

[eli-front]

 '^.+\\.(svg)$': '<rootDir>/__mocks__/svg.js'

This is awesome. Fixed for me with Next 13 + Jest 29 + svgr 6.5

[BeMain]

For me, Jest complained about "SvgrMock" not being a valid URL (TypeError: Invalid URL: SvgrMock). Changing the default export in svgrMock.tsx to:

export default SvgrMock

solved that. Now I get the following error instead...

error Command failed with signal "SIGSEGV".