Testing/Mocking ReactComponent SVG imports with Jest

Question

I am importing SVG's into my component and importing them as components using ReactComponent, for example

import { ReactComponent as D1 } from '../../../assets/images/characteristics/D1.svg';

When I run Jest/Enzyme to test the component, I get the following error

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Does it appear that I need to mock this? How could I do that?

so it's SVGR who loads SVG as React component, am I right? If I'm accurate here, it's a webpack loader. Did you try mocking svg through moduleNameMapper as their docs suggested? — skyboyer
– skyboyer, Commented Aug 20, 2020 at 20:47
Hi @skyboyer I believe it does use SVGR under the hood as i use create-react-app. Thanks, I will try this and report back — Paul
– Paul, Commented Aug 20, 2020 at 21:27
cool! could you please make a self-answer with bit of instructions? someone may find this by search and barely read comments, only looking for answers — skyboyer
– skyboyer, Commented Aug 21, 2020 at 9:56

rfc1484 · Accepted Answer · 2020-11-19 14:52:16Z

13

Although the solution pointed out by @skyboyer worked for me, it showed the following error in the console when running the tests:

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

Changing to the following inside the mock file worked for me as a solution:

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

export const ReactComponent = SvgrMock;
export default SvgrMock;

reference

answered Nov 19, 2020 at 14:52

rfc1484

9,91717 gold badges78 silver badges126 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Kelvinsekx Over a year ago

This is the perfect solution to mock svg files for @svgr/webpack 🍕

A.B · Accepted Answer · 2023-07-07 14:53:03Z

3

Add a mock file for svg and put it in the __mocks__ folder
Add a module name mapper inside jest config

__mocks__/svgMock.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

module.exports = {
    ...
    moduleNameMapper: {
        ...
        '\\.(svg)$': '<rootDir>/__mocks__/svgMock.js',
    },
};

edited Jul 7, 2023 at 14:53

answered Jul 6, 2023 at 21:54

A.B

837 bronze badges

Collectives™ on Stack Overflow

Testing/Mocking ReactComponent SVG imports with Jest

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related