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