Using vue and jest to testing svg inline Using vue and jest to testing svg inline vue.js vue.js

Using vue and jest to testing svg inline


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


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