Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

?url causes tests to fail #70

Closed
xFeXx opened this issue Sep 30, 2022 · 3 comments
Closed

?url causes tests to fail #70

xFeXx opened this issue Sep 30, 2022 · 3 comments

Comments

@xFeXx
Copy link

xFeXx commented Sep 30, 2022

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!

@xFeXx
Copy link
Author

xFeXx commented Oct 4, 2022

Nevermind, I got it running with: '^.*\\.(svg)(\\?url)$': '<rootDir>/configs/tests/__mocks__/svgUrlMock.ts',

svgUrlMock.ts:
export default 'test.svg'

@xFeXx xFeXx closed this as completed Oct 4, 2022
@slevinsk21
Copy link

slevinsk21 commented Jan 4, 2024

Hi, I have the same issue but I'm using react.js. Is there any special setting in the "svgrUrlMock.ts" file that you use?
thanks a lot...

image

@xFeXx
Copy link
Author

xFeXx commented Jun 6, 2024

My file just a basic export:

export default 'test.svg'

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants