'Jest Angular svg template

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.

angularsvgjestjs


Solution 1:[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']
};

Solution 2:[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.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2

Related Questions