Jest Angular svg template

Question

I have several components in my Angular 9 app that have their templates defined in svg file like templateUrl: './eye.component.svg'.

When I run tests it errors

SyntaxError: Unexpected token '<'

Jest encountered an unexpected token

This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

Here's what you can do:

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

How is this supposed to be fixed? It's still a template which I need to test, but now I cannot even start these tests.

Answer 1

It turned out that I simply had to extend jest.config.js transform and moduleFileExtentions with svg and now it works just fine.

Here is how the config looks like after changes

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']
};

Answer 2

In your Jest config for ts-jest you will likely have stringifyContentPathRegex - try adding svg to that value e.g.

stringifyContentPathRegex: '\\.(html|svg)$'

Example / more specifically:

"globals": {
  "ts-jest": {
    "tsconfig": "<rootDir>/tsconfig.spec.json",
    "stringifyContentPathRegex": "\\.(html|svg)$"
  }
}

Notes

• This worked for an Angular 12.x project
• And fwiw I tried various things including the accepted answer above, which didn't quite work for my case.