Testing/Mocking ReactComponent SVG imports with Jest

user_8193293 0
Viewed 4965

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?

react-component enzyme jestjs reactjs svg
1 Answers

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

user_7229830
Related