Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely

Question

Try to snapshot a Logo component but got an error that is not properait as far as i understand.
Pleas help!

logo.test.js

import TestRenderer from 'react-test-renderer';
import Logo from '../components/Common/Logo';

describe('Snapshot Logo components', () => {
  it('Test Logo', () => {
    const logoComponent = TestRenderer.create(<Logo />);
    const logoJson = logoComponent.toJSON();
    expect(logoJson).toMatchSnapshot();
  });
});

../components/Common/Logo/index.js

import React, {Component} from 'react';
import NextLink from '@material-ui/core/Link';
import LogoIcon from '../../../public/assets/icons/logo.svg';
import PATHS from '../../../router/paths';

function Logo() {
  return (
    <NextLink href={PATHS.work}>
      <LogoIcon />
    </NextLink>
  );
}

export default Logo;

package.json

    "react": "^18.2.0",
    "react-test-renderer": "^18.2.0"
    "@material-ui/core": "^4.11.4",

O.S

windows 10 
64-bit operating system, x64-based processor

Terminal

$> npx jest logo.test.js   
  console.error
    Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
    
    Check your code at index.jsx:12.
        at Logo

      10 |   return (
      11 |     <NextLink href={PATHS.work}>
    > 12 |       <LogoIcon />
         |       ^
{styles.logo} />*/}
      13 |     </NextLink>
      14 |   );type here

Answer 1

The error lies in the svg file. To solve it do:

1. Create a mock module for svg files
2. Add the module inside the __mocks__ folder
3. add a "module name mapper" for svg files inside jest config file

__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',
    }
}