Jest 无法处理使用参数导入的 SVG 文件答案

【问题标题】：Jest can't process SVG files imported with an argumentJest 无法处理使用参数导入的 SVG 文件
【发布时间】：2021-06-23 15:55:53
【问题描述】：

@nuxtjs/svg 在“vue-svg-loader”模式下，SVG 的导入方式如下： import ArrowRight from '~/assets/img/arrow-right.svg?inline'

但是Jest 的“?inline”部分有问题：

Could not locate module ~/assets/img/arrow-right.svg?inline mapped as:
D:\path\to\project\$1.

Please check your configuration for these entries:
{
  "moduleNameMapper": {
    "/^~\/(.*)$/": "D:\path\to\project\$1"
  },
  "resolver": undefined
}

我尝试了previous similar question 的两个答案，但在每种情况下我都遇到了相同的错误。

关于如何解决这个问题的任何建议？

【问题讨论】：

标签： vue.js svg jestjs babel-jest

【解决方案1】：

对于遇到此问题的任何人，解决方案是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}"]
};

关键点如下：

“您感兴趣的行是这一行，"^@/(.*svg)(\\?inline)$": "<rootDir>/src/$1"。注意将其添加到默认正则表达式 "^@/(.*)$": "<rootDir>/src/$1" 上方，此处为订单计数。”

【讨论】：