CODEWITHSUNDEEP
reactjssvgjestjsenzymereact-component
Paul
Paul

Reputation: 259

Testing/Mocking ReactComponent SVG imports with Jest

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?

Upvotes: 8

Views: 11264

Answers (2)

A.B
A.B

Reputation: 83

  1. Add a mock file for svg and put it in the __mocks__ folder
  2. 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',
    },
};

Upvotes: 3

rfc1484
rfc1484

Reputation: 9837

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

Upvotes: 13

Related Questions