Jest Test Component that Imports SVG with svg-sprite-loader - svg

Question

Hi I'm getting an error when running my angular unit tests through jest.
Here is the error
Cannot find module '!svg-sprite-loader!node_modules/#my-package/brand-logos/laboratories/img.svg' from 'app.component.ts'
Here is my source code in my app component:
import '!svg-sprite-loader!node_modules/#my-package/brand-logos/laboratories/img.svg' from 'app.component.ts';
#Component({
selector: 'banner-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
...
Here is my jest.config.js
module.exports = {
globals: {
'ts-jest': {
tsConfig: './tsconfig.spec.json',
stringifyContentPathRegex: '\\.html$',
astTransformers: [
require.resolve('jest-preset-angular/InlineHtmlStripStylesTransformer')
]
}
},
setupFilesAfterEnv: [
'<rootDir>/node_modules/#angular-builders/jest/dist/jest-config/setup.js'
],
transform: {
'^.+\\.(ts|js|html)$': 'ts-jest'
},
testMatch: [
'**/+(*.)+(spec|test).+(ts|js)?(x)'
],
testEnvironment: 'jest-environment-jsdom-thirteen',
moduleNameMapper: {
'#core/(.*)': '<rootDir>/src/app/core/$1',
'#shared/(.*)': '<rootDir>/src/app/shared/$1'
},
transformIgnorePatterns: ['node_modules/(?!#ngrx)'],
collectCoverageFrom: [
'src/app/**/*.ts',
'!src/app/**/*.module.ts',
'!src/app/**/*.array.ts',
'!src/app/fragmentTypes.ts'
],
moduleFileExtensions: ['ts', 'tsx', 'js', 'json','svg'],
testPathIgnorePatterns: ['e2e','coverage', 'reports','/node_modules/', '/dist/', 'src/app/*.module.{js}'],
snapshotSerializers: [
'jest-preset-angular/AngularSnapshotSerializer.js',
'jest-preset-angular/HTMLCommentSerializer.js'
]
};
How do i modify my config so that jest can use the sprite loader or mock it out?

Answer 1

What I ended up doing was moving all my sprite loader imports into a file that we exclude from unit testing. It's kind of a hack but it works.