I've created a simple component that wrapped SVG as below:

import React from 'react';
import CheckOutline from '../../assets/svg/check-outline.svg';
import Check from '../../assets/svg/check.svg';

interface ISvgIconProps extends SvgProps {
  name: 'check-outline' | 'check';
}

const SvgIcon: React.FC<ISvgIconProps> = ({name, ...args}) => {
  const nameMap = {
    'check-outline': CheckOutline,
    check: Check,
  };

  const SvgComp = nameMap[name];

  return <SvgComp {...args} />;
};

export default SvgIcon;

And this component can then be used on other component like below:

import SvgIcon from '../svg-icon';

...
<SvgIcon
      name="check"
      width={24}
      height={24}
      fill={colors.PRIMARY_DARK}
      onPress={() => navigation.goBack()}
    />

Everything working great, I'm able to see the SVG icon being rendered. Now I met the below problem when I tried snapshot testing:

Element 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 `SvgIcon`.

      at createFiberFromTypeAndProps (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:16180:21)
      at createFiberFromElement (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:16208:15)
      at reconcileSingleElement (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:5358:23)
      at reconcileChildFibers (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:5418:35)
      at reconcileChildren (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7984:28)
      at mountIndeterminateComponent (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:8810:5)
      at beginWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:9966:16)
      at performUnitOfWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:13800:12)
      at workLoopSync (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:13728:5)
      at renderRootSync (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:13691:7)

UPDATES

Instead of return <SvgComp {...args} />;, I tried to create the element manually but still failed:

return React.createElement(SvgComp, {...args}, null);

Wondering if anyone has any idea about it?