使用 vue 和 jest 测试 svg 内联

Question

当我在代码中使用内联图像时，我在测试视图时遇到问题 'src/assets/icons/circle-small.svg?inline'

我有版本：

- 巴别尔笑话：23.6.0
- vue：2.6.10

配置：

Vue 命令行界面：

const svgRule = config.module.rule('svg');
svgRule.oneOf('inline').use('vue-svg-loader').loader('vue-svg-loader').end();

笑话配置：

  moduleFileExtensions: [
    'js',
    'vue',
  ],
  transform: {
    '^.+\\.vue$': 'vue-jest',
    '^.+\\.js$': '<rootDir>/babel-jest',
    '.+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2|svg)$': 'jest-transform-stub',
  },
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1',
  },

我在视图中导入：

import Img from '@/assets/icons/img.svg?inline';

我收到配置错误：

Could not locate module @/assets/icons/circle-small.svg?inline mapped as:
/some/src/assets/icons/circle-small.svg?inline.

Please check your configuration for these entries:
{
  "moduleNameMapper": {
    "/^@\/(.*)$/": "/some/src/$1"
  },
  "resolver": null
}

当我导入内联图像时，我在配置测试时遇到问题。谁能知道我还应该配置什么或使用什么库？

Answer 1

我找到了解决方案，修改正则表达式就足够了

这是错误的：

'.+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2|svg)$': 'jest-transform-stub',

这是正确的：

'.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)(\\?inline)?$': 'jest-transform-stub',