使用 vue 和 jest 内联测试 svg [英] Using vue and jest to testing svg 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',],转变: {'^.+\\.vue$': 'vue-jest','^.+\\.js$': '/babel-jest','.+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2|svg)$': 'jest-transform-stub',},模块名称映射器:{'^@/(.*)$': '/src/$1',},

我在视图中导入:

从'@/assets/icons/img.svg?inline'导入Img；

我收到配置错误:

无法定位模块@/assets/icons/circle-small.svg?inline 映射为:/some/src/assets/icons/circle-small.svg?inline.请检查这些条目的配置:{模块名称映射器":{"/^@\/(.*)$/": "/some/src/$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-存根'，

I have problem with testing view when I use image inline in code 'src/assets/icons/circle-small.svg?inline'

I have versions:

- babel-jest: 23.6.0
- vue: 2.6.10

Configuration:

Vue CLI:

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

Jest config:

  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',
  },

I import in view:

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

I getting configuration error:

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
}

I have a problem with configuring tests for the case when I import inline image. Can anyone know what else i should to configure or what library to use?

解决方案

I found a solution, it was enough to modify regex

this was wrong:

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

and this is correct:

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

这篇关于使用 vue 和 jest 内联测试 svg的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！