Using vue and jest to testing svg inline

Question

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?

sara · Accepted Answer · 2019-07-03 12:52:36Z

6

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

answered Jul 3, 2019 at 12:52

sara

1691 silver badge14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

KingWu · Accepted Answer · 2020-05-27 03:27:02Z

First, by using jest moduleNameMapper function, remove ?inline

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

For my case

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

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

Second, transform the svg files into vuejs format

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

svgTransform.js can find it in the guide 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,
}

Mendes Jorge · Accepted Answer · 2022-02-18 16:36:41Z

know this thread is very old but got here searching for a solution so will anwser as my solution is a bit different from the other ones and for me simple enough to resolve my problem.

vue: 3.0.0
vue-jest: 5.0.0-0

Just added this config to 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'
    }

and added the fileMock.js file:

export default 'test-file-stub'

jest now will load that string and stop give error when I import svg as a component.

This resolves only the error, to check some class on the inline svg the test-file-stub needs to step up for some kind of template, really depends if needed.

Collectives™ on Stack Overflow

Using vue and jest to testing svg inline

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related