Vue-cli: "Could not locate module" error when using SVG from sprite as component

[HumayraHanif]

Version

3.0.4

Node and OS info

Node v8.9.1, npm 5.5.1, win 10

Steps to reproduce

1. Within a project, add a SVG within a sprite by using "import Close from '@/assets/icons/ui.svg?close' "
2. Add a unit test (using jest) to this component.
3. Run tests.

What is expected?

Test runs

What is actually happening?

Get error:
Configuration error:

Could not lo

cate module @/assets/icons/ui.svg?close mapped as:
C:\Users\user\git\vue 3\proj\src\assets/icons/ui.svg?close.

Please check your configuration for these entries:
{
  "moduleNameMapper": {

"/^@\/(.*)$/": "C:\Users\user\git\vue 3\proj\src\$1"
  },
  "resolver": null

---

I upgraded this project to the new cli, and had to use SVGs differently to how we were using them before, and then came across this problem as one of the steps in the upgrade. We're using the loader vue-svg-sprite-loader in webpack to get this working. Previously, we were using :xlink:href within a component, but now we're using a component (e.g. < Close / >) .
Jest config is the same as default.

[LinusBorg]

We're using the loader vue-svg-sprite-loader in webpack to get this working

Then please share a runnable reproduction as we can't guess how you configured your setup.

[HumayraHanif]

Thanks, you can fine one here

[LinusBorg]

your problem is that the import uses a resouceQuery (.svg?close), which 1) doesn't work in node and 2) isn't covered by the regex for the transform stub we have configured for assets in jest here:

https://github.com/HumayraHanif/svg-bug-demo/blob/master/package.json#L64

So you would have to come up with an extra regex for that, probably something like:

".+\\.svg?.+$": "jest-transform-stub",

Since this is related to your specific use of this loader, we can't do anything about this in the jest plugin itself.

[HumayraHanif]

Thanks, that helped. For anyone else who faces the same problem, you also need to add a mapping to moduleNameMapper in jest.config.js too, something like this:
'.+\.svg?.+$': '/src/assets/icons/ui.svg',