Angular 8+ tsconfig Path Aliases not Recognized in .spec files

tsconfig.ts

{
  "compilerOptions": {
    ....
    "paths": {
      "@app1/*" : ["src/*"]
    }
  }
}

packages.json

  "jest": {
    ...
    "rootDir": "src",
    "moduleNameMapper": {
      "@app1/(.*)$": "<rootDir>/$1"
    } 
  }

In my case, I forgot to setup jest.config.js file according of my project.

tsconfig.ts
...
"@app/*": ["src/app/*"],
...

and

jest.config.js

module.exports = {
    moduleNameMapper: {
        "@app/(.*)$": "<rootDir>/src/app/$1"
    } 
};

Reference: https://jestjs.io/docs/en/configuration#modulenamemapper-objectstring-string--arraystring

I imagine the issue is related to your files and include configuration. When I included your rather limited set of files and include patterns I instantly saw the same issue you describe for the simple reason that not all of my files match *.d.ts.

To see if this is what is causing the issue for you (or if you know that you have files not matched by *.d.ts), I'd recommend starting by simply removing your files and include sections, saving tsconfig.json and restarting the TS server in VS Code.

For those that don't know, you can restart the TS server in VS Code by opening the Command Palette (Ctrl+Shift+P or ⌘+Shift+P or just F1) within a .ts file and typing Restart TS and selecting that command.

If that is the solution for you, then you just need to think about what you actually need in files and include. The documentation should help on that front.

The biggest takeaway: you don't need either of them:

If the "files" and "include" are both left unspecified, the compiler defaults to including all TypeScript (.ts, .d.ts and .tsx) files in the containing directory and subdirectories except those excluded using the "exclude" property. JS files (.js and .jsx) are also included if allowJs is set to true.

If you do need that specificity, you may just need to add *.ts and\or *.tsx patterns to your include patterns to solve the issue.

I hope that helps!