vue-svg
vue-svg copied to clipboard
How do you integrate it within the test utils library
Given the testing suite @vue/test-utils based on Jest and the usage of ?inline resource flags within the codebase. What do you suggest as configuration in order to make the testing suite running without failures?
Browsing the web it is possible to find solutions like:
Add to the transform
key of the jest.config.js file:
'.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)(\\?inline)?$': 'jest-transform-stub',
Add to the moduleNameMapper
key a new entry as such:
moduleNameMapper: {
'^@/(.*svg)(\\?inline)$': '<rootDir>/src/$1',
'^@/(.*)$': '<rootDir>/src/$1',
},
Unfortunately both of these changes aren't enough, when touching the moduleNameMapper the test suite fails with:
Could not locate module @/${type}/${view}.vue mapped as:
/[OS PATH TO SOURCE]/src/${type}/${view}.vue.
Please check your configuration for these entries:
{
"moduleNameMapper": {
"/^@\/(.*)$/": "/[OS PATH TO SOURCE]/src/$1"
},
"resolver": null
}
The same error applies when the new line gets removed:
Could not locate module @/assets/images/[MY IMAGE FILE].svg?inline mapped as:
/[OS PATH TO SOURCE]/src/assets/images/[MY IMAGE FILE].svg?inline.
Please check your configuration for these entries:
{
"moduleNameMapper": {
"/^@\/(.*)$/": "/[OS PATH TO SOURCE]/src/$1"
},
"resolver": null
}
Note: the problem happens on a vue-cli based project with the following dependency versions:
"vue-cli-plugin-svg": "^0.1.3",
"@vue/test-utils": "^1.3.0",
"vue-jest": "^3.0.7",
"jest": "^27.4.1",
"@vue/cli-service": "^4.5.15",