Jest for Angular with Pug throws "SyntaxError: Unexpected token '<'" at templateUrl

Question

I'm changing a very large electron+angular+pug project to use Jest instead of Karma+Jasmine.

These are my package versions:

Node: 15.14.0
"@angular/cli": "11.2.10",
"jest": "27.5.1",
"jest-canvas-mock": "2.5.2",
"jest-preset-angular": "11.1.2",
"jest-raw-loader": "1.0.1",
"jest-when": "3.6.0",
"pug": "2.0.4",

This is what my jest.config.json file currently looks like:

{
  "preset": "jest-preset-angular",
  "setupFilesAfterEnv": ["<rootDir>/setupJest.ts"],
  "testPathIgnorePatterns": ["<rootDir>/node_modules/", "<rootDir>/dist/"],
  "globals": {
    "ts-jest": {
      "tsconfig": "<rootDir>/tsconfig.spec.json"
    }
  },
  "transform": {
    "\\.pug$": "<rootDir>/pug-transformer.ts",
    "\\.svg$": "jest-raw-loader"
  },
  "moduleNameMapper": {
    "^!raw-loader!.*": "jest-raw-loader"
  },
  "setupFiles": ["jest-canvas-mock"]
}

This is what my setupJest.ts looks like:

import "jest-preset-angular/setup-jest";
import "zone.js";
import "zone.js/dist/zone-testing.js";

jest.mock("@electron/remote", () => ({ exec: jest.fn() }));

For simplicity I'm running only one test suite with only one test:
npm run test -- src/renderer/app/myFolder/my.component.spec.ts

my.component.spec.ts:

@Component({
  selector: "my",
  templateUrl: "./my.component.pug",
})
export class MyComponent{}

my.component.pug:

.mb-1
  ng-content

And I'm getting this error:

C:\Users\...\renderer\app\myFolder\my.component.pug:1
>     ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){<div class="mb-1"><ng-content></ng-content></div>
>                                                                                       ^

SyntaxError: Unexpected token '<'

  10 | @Component({
  11 |   selector: "my",
> 12 |   templateUrl: "./my.component.pug",
     |   ^
  13 | })
  14 | export class MyComponent {}

at Runtime.createScriptFromCode (../../node_modules/jest-runtime/build/index.js:1728:14)
at app/myFolder/my.component.ts:12:3
at Object.<anonymous> (app/myFolder/my.component.ts:19:2)

Running the app works of course.

The parsed HTML seems fine. When i copied it and pasted it into a pug file, and changed the pug extension to HTML extension, then the error moved to another file, which suggests to me that it 'fixes' the issue. The problem seems to appear when the extension itself is something other than HTML.

Looking at older questions i tried to add moduleFileExtensions and stringifyContentPathRegex with 'Pug' to my Jest config, but it changes nothing.

But interestingly enough if i add "stringifyContentPathRegex": "\\.(pug)$" then the the error stays on the same file even when the templates are changed to be HTML, with no pug involved. If the pathRegex is HTML, then the error moves to another file.

Jest for Angular with Pug throws "SyntaxError: Unexpected token '<'" at templateUrl

0 Answers0