Как правильно импортировать svg как ReactComponent для Jest?

Question

uabylbekov @uabylbekov

Как правильно импортировать svg как ReactComponent для Jest?

Я добавил SVG иконку в React приложение как ReactComponent и получаю данную ошибку:

SyntaxError: corner-resize-arrow.svg: Support for the experimental syntax 'jsx' isn't currently enabled (1:1):
<svg width="12" height="12" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg'
    <path d=-"M12 8.58307e-05L3.05176e-05 12L3.1209e-05 9L9
      8.51393e-05L12 8.58307e-05Z" fill="white"/>
    <path d="M6 5.34058e-05L-4.76837e-06 5.99988L-4.5538e-06 2.99988L3
      5.31912e-05L6 5.34058e-05z" fill="white"/>
</svg>
Add @babel/preset-react (https://git.io/IfeDR) to the 'presets' section of your
Babel config to enable transformation.
If you want to leave it as-is, add @babel/plugin-syntax-isx
(https://git.io/vb4yA) to the 'plugins' section to enable parsing,

У меня в babel.config все данные пресеты уже добавлены:

module.exports = {
    "presets": ['@babel/preset-env', '@babel/preset-react'],
    "plugins": ['@babel/plugin-proposal-class-properties']
}

и так выглядит настройка Jest в package.json:

"jest": {
    "verbose": true,
    "collectCoverage": true,
    "collectCoverageFrom":[
        "**/src/**"
        "!**/node_modules/**",
        "!**/src/index**",
        "!**/src/const**"
        "!**/src/Redux/constants**"
        "!**/coverage/**"
        "!**/public/**"
        "!**/tests/**"
        "!**/webpack/**",
        "!**/babel.config.js**"
        "!**/src/serviceWorker.js**"
    ],
    "coverageReporters": [
        "lcov"
        "text"
        "clover"
        "json"
    ],
    "coverageDirectory":"./coverage",
    "setupFiles": [
        "./src/setupTests.js"
    ],
    "moduleFileExtensions": [
        "js",
        "jsx"
    ],
    "moduleNameMapper": {
         "'\(ess|less|scss|sass)$": "identity-obj-proxy"
    },
    "testResultsProcessor":"jest-sonar-reporter"
}

Немного погуглив я наткнулся на такое решение. Добавил в проект модули: babel-jest, jest-svg-transformer
и добавил в настройки jest след линии:

"transform": {
            "^.+\\.jsx?$": "babel-jest",
            "^.+\\.svg$": "jest-svg-transformer"
        }

после начал получать такую ошибку:

(React) Element type is invalid, expected a string (for built in components) or a class/function but got undefined. You likely forgot to export your component from the file.

Импортирую я svg файл так:

import { ReactComponent as SomeIcon } from "../filepath.svg"

Данная проблема происходит только во время тестов jest и enzyme. NPM start работает без проблем. Буду благодарен если кто то сталкивался с данной проблемой и может помочь с решением