Jest Angular SVG шаблон

Question

В моем приложении Angular 9 есть несколько компонентов, шаблоны которых определены в файле svg, например templateUrl: './eye.component.svg'.

При запуске тестов возникают ошибки

SyntaxError: Неожиданный токен '<' </p>

Jest обнаружил неожиданный токен

Обычно это означает, что вы пытаетесь импортировать файл, который Jest не может проанализировать, например, он не является простым JavaScript.

По умолчанию, если Jest видит конфигурацию Babel, он использует ее для преобразования ваших файлов, игнорируя "node_modules".

Вот что вы можете сделать:

• To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
• If you need a custom transformation specify a "transform" option in your config.
• If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

Как это должно быть исправлено? Это все еще шаблон, который мне нужно проверить, но теперь я даже не могу запустить эти тесты.

Answer 1

Оказалось, что мне просто пришлось расширить jest.config.js transform и moduleFileExtentions с svg, и теперь все работает просто отлично.

Вот как выглядит конфигурация после изменений

module.exports = {
  testMatch: ['**/+(*.)+(spec|test).+(ts|js)?(x)'],
  transform: {
    '^.+\\.(ts|js|html|svg)$': 'ts-jest'
  },
  resolver: '@nrwl/jest/plugins/resolver',
  moduleFileExtensions: ['ts', 'js', 'html', 'svg'],
  coverageReporters: ['html']
};