Is there any proper way to handle svg?inline in jest tests?

[arishojaei]

There is no proper solution for easily reading svg?inline from the component that you want to test.

• jest: "29.5.0"
• jest-transform-stub: "2.0.0"
• babel-jest: "^29.5.0"
• @vue/test-utils: "1.3.4"
• @vue/vue2-jest: "29.2.4"

Steps to reproduce

1. Create a simple component and use *.svg?inline in it.
2. Try to write a simple test for that component.

Actual behaviour

  ● Test suite failed to run

    Configuration error:

    Could not locate module @/static/fonts/icons/chevron-right.svg?inline mapped as:
    /Users/ari/Documents/Projects/noeku-boilerplate/src/$1.

    Please check your configuration for these entries:
    {
      "moduleNameMapper": {
        "/^@\/(.*)$/": "/Users/ari/Documents/Projects/noeku-boilerplate/src/$1"
      },
      "resolver": undefined
    }

       8 |       >
       9 |         <component
    > 10 |           :is="back ? 'a' : 'nuxt-link'"
         |                                        ^
      11 |           v-bind="{[back ? 'href' : 'to']: link}"
      12 |           :title="text"
      13 |           class="breadcrumb__link"

      at createNoMappedModuleFoundError (node_modules/jest-resolve/build/resolver.js:759:17)
      at Object.require (src/components/Shared/Breadcrumb.vue:10:40)
      at Object.require (src/components/Shared/tests/breadcrumb.test.js:6:1)

Tested Solutions

I found some solutions by creating a new transformer but they don't work on the latest test packages versions. Also one of the solutions was adding a new moduleNameMapper:

'^@/(.*svg)(\\?inline)$': '<rootDir>/src/$1'

But this also leads us to another error:

  ● Console

    console.error
      [Vue warn]: Invalid Component definition:

      found in

      ---> <Breadcrumb>
             <Root>

      81 |     list-style: none;
      82 |     display: flex;
    > 83 |     align-items: center;
         |               ^
      84 |
      85 |     &:last-child {
      86 |       > svg {