`?url` causes tests to fail
Closed this issue · 3 comments
First of all, thank you for your work! It really helped a lot while reworking a whole project with vue3 and vite.
While testing with only importing without any prefix I could get it running.
But I stumbled across a problem while unit testing my components.
I imported a svg in order to use it as a background-image:
import CloudsSvg from '~client/assets/svg/registration_animation_clouds.svg?url'
<div :style="{ backgroundImage: `url(${CloudsSvg})` }" >
In dev and prod build everything runs fine, but the test keeps failing.
I tried the approach from here: #35
My jest.config.js
looks like this:
const esModules = ['lodash'].join('|')
module.exports = {
rootDir: process.cwd(),
displayName: {
name: 'nodejs',
color: 'blueBright',
},
moduleFileExtensions: ['js', 'json', 'ts', 'tsx'],
moduleNameMapper: {
'.+\\.(svg?url)$': '<rootDir>/configs/tests/__mocks__/svgUrlMock.ts',
'^.*\\.svg$': '<rootDir>/configs/tests/__mocks__/svgMock.vue',
'^.*\\.scss$': '<rootDir>/configs/tests/__mocks__/scssMock.vue',
'^~configs(.*)$': '<rootDir>/configs/$1',
'^~engine(.*)$': '<rootDir>/src/engine/$1',
'^~client(.*)$': '<rootDir>/src/client/$1',
},
setupFiles: ['<rootDir>/configs/tests/utils/setEnvVars.js'],
setupFilesAfterEnv: [
'<rootDir>/configs/tests/utils/preload.js',
'<rootDir>/configs/tests/utils/ignoreWarn.js',
'<rootDir>/configs/tests/utils/ignoreError.js',
],
testEnvironment: 'node',
testEnvironmentOptions: {
customExportConditions: ['node', 'node-addons'],
},
testRegex: ['__tests__\\/[A-Za-z_.]*\\.(service|node|redirect)\\.(spec|test)\\.ts?$'],
transform: {
'\\.[jt]sx?$': 'babel-jest',
},
transformIgnorePatterns: [`<rootDir>/node_modules/(?!(${esModules})/)`],
verbose: false,
}
I know the problem is '.+\\.(svg?url)$': '<rootDir>/configs/tests/__mocks__/svgUrlMock.ts',
, but I can't find a working solution.
Is there a clever way to do this, or is it possible to add native jest support?
Thanks in advance!
Nevermind, I got it running with: '^.*\\.(svg)(\\?url)$': '<rootDir>/configs/tests/__mocks__/svgUrlMock.ts',
svgUrlMock.ts:
export default 'test.svg'
My file just a basic export:
export default 'test.svg'