Question

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

我有版本：

- babel-jest: 23.6.0
- vue: 2.6.10

配置：

Vue CLI：

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

首先，通过使用笑话moduleNameMapper函数，删除?inline

moduleNameMapper: {
  '^.+/(.*\\.svg)\\?inline$': '<rootDir>/path/svg/$1'
},

我的情况

import SvgBack from '../../assets/svg/back.svg?inline'

(Convert to) ---> 
import SvgBack from '../../assets/svg/back.svg'

第二，将svg文件转换为vuejs格式

transform: {
    '^.+\\.svg$': '<rootDir>/svgTransform.js',
},

svgTransform.js可以在指南https://github.com/visualfanatic/vue-svg-loader/blob/master/docs/faq.md#how-to-use-this-loader-with-jest

中找到

jest.config.js

module.exports = {
  collectCoverage: false,
  collectCoverageFrom: [
    '<rootDir>/components/**/*.vue',
    '<rootDir>/pages/*.vue',
  ],
  // tell Jest to handle `*.vue` files
  moduleFileExtensions: [ 'js', 'json', 'vue' ],
  moduleNameMapper: {
    '^.+/(.*\\.svg)\\?inline$': '<rootDir>/assets/svg/$1',
  },
  modulePaths: [ '<rootDir>' ],
  snapshotSerializers: [ '<rootDir>/node_modules/jest-serializer-vue' ],
  transform: {
    // process `*.vue` files with `vue-jest`
    '.*\\.(vue)$': '<rootDir>/node_modules/vue-jest',
    // process js with `babel-jest`
    '^.+\\.js$': '<rootDir>/node_modules/babel-jest',
    // process svg with svgTransform.js
    '^.+\\.svg$': '<rootDir>/tests/tools/svgTransform.js',
  },
  watchman: false,
}

Answer 2

我找到了一个解决方案，足以修改正则表达式

这是错误的：

active

这是正确的：

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

使用Vue和Jest内联测试svg

2 个答案: