使用vue和jest在内联测试SVG

Question

我在代码中使用Image Inline时在测试视图方面有问题 '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

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

这是错误的：

'.+\.(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',

Answer 2

首先，通过使用开玩笑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/master/docs/docs/faq.md#how-to-how-to-so-use-use-use-use-this-this-this-this-loader-with--with-----开玩笑

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 3

知道这个线程很旧，但是在这里搜索解决方案，所以Anwser会因为我的解决方案与其他解决方案有所不同，对我而言，这足以解决我的问题。p> vue：3.0.0
vue-jest：5.0.0-0

刚将此配置添加到jest.config.js：

moduleNameMapper: {
   '\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)(\?inline)?$': '<rootDir>/tests/mocks/fileMock.js'
    }

并添加了filemock.js文件：

export default 'test-file-stub'

Jest现在将加载该字符串并停止在我导入SVG作为组件时停止错误。

这仅解决错误，要检查Inline SVG上的某些类，测试文件量表需要加强某种模板，实际上取决于需要。