[Vuejs]-Jest can't process SVG files imported with an argument

by

0👍

✅

For anyone bumping into this issue, solution is here:

jest.config.js

module.exports = {
  moduleFileExtensions: ["js", "jsx", "json", "vue"],
  transform: {
    "^.+\\.svg": "<rootDir>/svgTransform.js",
    "^.+\\.vue$": "vue-jest",
    ".+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$": "jest-transform-stub",
    "^.+\\.jsx?$": "babel-jest"
  },
  moduleNameMapper: {
    "^@/(.*svg)(\\?inline)$": "<rootDir>/src/$1",
    "^@/(.*)$": "<rootDir>/src/$1"
  },
  snapshotSerializers: ["jest-serializer-vue"],
  testMatch: ["**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"],
  testURL: "http://localhost/",
  collectCoverageFrom: ["!**/src/__mocks__/**", "**/src/**/*.{js,vue}"]
};

The crucial point is the following:

"The line that interests you is this one, "^@/(.*svg)(\\?inline)$": "<rootDir>/src/$1". Be careful to add it above the default regex, "^@/(.*)$": "<rootDir>/src/$1", order counts here."

Leave a comment