tsConfig option doesn't work

[marek-siemieniuk-morawski]

Describe the Bug

When I have a workspace with multiple projects:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "foo": {
      "projectType": "application",
      "schematics": {},
      "root": "projects/foo",
      "sourceRoot": "projects/foo/src",
      "prefix": "app",
      "architect": {
        "build": {},
        "serve": {},
        "extract-i18n": {},
        "test": {
          "builder": "@angular-builders/jest:run",
          "options": {
            "polyfills": [
              "zone.js",
              "zone.js/testing"
            ],
            "assets": [
              "projects/foo/src/favicon.ico",
              "projects/foo/src/assets"
            ],
            "styles": [
              "projects/foo/src/styles.css"
            ],
            "scripts": []
          }
        }
      }
    },
    "boo": {}
  }
}

the expected tsconfig.spec.json location is in the workspace root, not in the project directory (projects/foo):

> [email protected] test:foo
> ng run foo:test

 FAIL  projects/foo/src/app/app.component.spec.ts
  ● Test suite failed to run

    File not found: <rootDir>/tsconfig.spec.json (resolved as: /Users/marek/Code/angular-jest/tsconfig.spec.json)

      at NgJestConfig.ConfigSet.resolvePath (node_modules/ts-jest/dist/legacy/config/config-set.js:598:19)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        0.941 s
Ran all test suites.

Same, when I set the tsConfig option to set a custom path to tsconfig.spec.json, it throws the same error:

> [email protected] test:foo
> ng run foo:test

 FAIL  projects/foo/src/app/app.component.spec.ts
  ● Test suite failed to run

    File not found: <rootDir>/tsconfig.spec.json (resolved as: /Users/marek/Code/angular-jest/tsconfig.spec.json)

      at NgJestConfig.ConfigSet.resolvePath (node_modules/ts-jest/dist/legacy/config/config-set.js:598:19)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        0.941 s
Ran all test suites.

Minimal Reproduction

1. Create a new workspace without projects using Angular CLI v16

$ ng new angular-jest --no-create-application

2. Create a new project

$ cd angular-jest
$ ng generate application foo

3. Follow the @angular-builders/jest guideline to migrate from Karma to Jest

Reproduction repository:
https://github.com/marek-siemieniuk-morawski/angular-builder-jest-tsconfig-issue

Expected Behavior

1. When it's a multiproject workspace, the expected default location of tsconfig.spec.json should be in the project location
2. When the option tsConfig is set, the expected tsconfig.spec.json should be accordingly

A clear and concise description of what you expected to happen.

Environment

Libs
- @angular/core version: 16.1.0
- @angular-devkit/build-angular version: 16.1.0
- @angular-builders/jest version: 16.0.0

For Tooling issues:
- Node version: v18.12.1
- Platform:  Mac

[amakhrov]

Same here. Even though we don't have multiple projects in a workspace, our angular.json has a top-level projects entry for the single project we have, with root: "src".
I can't figure out a way to point the jest bulder to the tsconfig in src/ instead of the repo root.

Additionally, the configPath options also seems ignored

[amakhrov]

It looks like the path to tsconfig.spec.json is hardcoded in jest-preset-angular.
A workaround that I found is removing preset: "jest-preset-angular" from my jest.config.js and set a custom transform object instead:

- preset: "jest-preset-angular",
+ preset: null,
+ transform: {
+   ^.+\\.(ts|js|mjs|html|svg)$': ['jest-preset-angular', {
+     tsconfig: "<rootDir>/src/tsconfig.spec.json",
+     stringifyContentPathRegex: "\\.(html|svg)$",
+   }],
}

[marek-siemieniuk-morawski]

Thanks @amakhrov for the comment, however, in my case configPath works fine. When the config is:

"test": {
  "builder": "@angular-builders/jest:run",
  "options": {
    "polyfills": [
      "zone.js",
      "zone.js/testing"
    ],
    "configPath": "config/jest.config.js",
    "assets": [
      "projects/foo/src/favicon.ico",
      "projects/foo/src/assets"
    ],
    "styles": [
      "projects/foo/src/styles.css"
    ],
    "scripts": []
  }
}

the config location is changed

> [email protected] test:foo
> ng run foo:test

    warning: unable to locate custom jest configuration file at path "/Users/marek/Code/angular-jest/projects/foo/config/jest.config.js"

Also, tried your workaround and unfortunately it didn't help :(

[lukaszgodula]

We have the same issue, our tests finally started with workaround above, but with thymikee/jest-preset-angular#2117 this one

[luukvhoudt]

I was also able to reproduce this issue. However, I would like to add one thing.

If you run the ng run foo:test command inside the projects/foo directory then it works fine.

[just-jeb]

Hey guys, @marek-siemieniuk-morawski thanks for providing a reproduction, it speeds up the debug process.
I looked at the issue and honestly it doesn't look like a bug in @angular-builders/jest.
The builder picks up the right config and overwrites it, here's the final config that is passed on to Jest:

{
  "preset": "jest-preset-angular",
  "setupFilesAfterEnv": [
    "/Users/jeb/angular-builder-jest-tsconfig-issue/node_modules/@angular-builders/jest/dist/jest-config/setup.js",
    "/Users/jeb/angular-builder-jest-tsconfig-issue/node_modules/@angular-builders/jest/dist/global-mocks/style-transform.js",
    "/Users/jeb/angular-builder-jest-tsconfig-issue/node_modules/@angular-builders/jest/dist/global-mocks/match-media.js"
  ],
  "moduleNameMapper": {
    "\\.(jpg|jpeg|png)$": "/Users/jeb/angular-builder-jest-tsconfig-issue/node_modules/@angular-builders/jest/dist/jest-config/mock-module.js"
  },
  "testMatch": [
    "/Users/jeb/angular-builder-jest-tsconfig-issue/projects/foo/**/*(*.)@(spec|test).[tj]s?(x)"
  ],
  "transform": {
    "^.+\\.tsx?$": [
      "ts-jest",
      {
        "tsconfig": "/Users/jeb/angular-builder-jest-tsconfig-issue/projects/foo/tsconfig.spec.json"
      }
    ]
  }
}

As mentioned above, <rootDir>/tsconfig.spec.json comes from jest-preset-angular and it doesn't get overwritten, despite the right configuration is provided. I am not sure what else can be done in the builder itself, you should probably open an issue in ts-jest or jest-preset-angular repo.

That said, looks like our multi-app example suffers from the same issue, it's just never popped up because it has tsconfig.spec.json on the root level as well.
When I delete it all the tests of this example start to fail with the same error.

Seems like this might be a viable workaround for you until this whole thing is sorted out - just put tsconfig.spec.json on a workspace root level.

[just-jeb]

The fix is available in the latest stable version, props to @pixtron for finding and fixing the issue! 🎉