Question

嗨，我通过玩笑进行角度单元测试时遇到错误。

这是错误

 Cannot find module '!svg-sprite-loader!node_modules/@my-package/brand-logos/laboratories/img.svg' from 'app.component.ts'

这是我在应用程序组件中的源代码：

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 {
...

这是我的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'
  ]
};

我如何修改我的配置，以便开玩笑地使用精灵加载器或对其进行模拟？

Answer 1

我最终要做的是将所有sprite loader导入移动到一个文件中，该文件不包含在单元测试中。这是一种破解，但可以。

通过svg-sprite-loader导入SVG的Jest测试组件

1 个答案: