Configure `jest-preset-angular` with angular workspace

File structure:

- projects
- projectA
- tsconfig.app.json
- tsconfig.spec.json
- projectB
- tsconfig.app.json
- tsconfig.spec.json
- jest.config.js
- setup-jest.ts
- tsconfig.base.json
- tsconfig.json


I followed the installation https://thymikee.github.io/jest-preset-angular/docs/getting-started/installation .

If I go with https://thymikee.github.io/jest-preset-angular/docs/guides/angular-ivy#control-ngcc-processing, it obviously doesn't find tsconfig.spec.json:

File not found: <rootDir>/tsconfig.spec.json


In my case, I have one tsconfig.spec.json per project...

// jest.config.js
globalThis.ngJest = {
skipNgcc: true,
tsconfig: 'tsconfig.spec.json', // this is the project root tsconfig
};

module.exports = {
preset: 'jest-preset-angular',
setupFilesAfterEnv: ['<rootDir>/setup-jest.ts'],
globalSetup: 'jest-preset-angular/global-setup',
// https://thymikee.github.io/jest-preset-angular/docs/getting-started/installation#avoid-karma-conflicts
testPathIgnorePatterns: [
'/node_modules/',
'<rootDir>/test.ts',
'<rootDir>/projects/projectA/src/test.ts',
'<rootDir>/projects/projectB/src/test.ts',
]
// projects: [
// "<rootDir>/projects/fvl"
// ]
};


Without the ngcc skip:

// jest.config.js
module.exports = {
preset: 'jest-preset-angular',
setupFilesAfterEnv: ['<rootDir>/setup-jest.ts'],
globalSetup: 'jest-preset-angular/global-setup',
// https://thymikee.github.io/jest-preset-angular/docs/getting-started/installation#avoid-karma-conflicts
testPathIgnorePatterns: [
'/node_modules/',
'<rootDir>/test.ts',
'<rootDir>/projects/projectA/src/test.ts',
'<rootDir>/projects/projectB/src/test.ts',
]
// projects: [
// "<rootDir>/projects/fvl"
// ]
};


I get the ngcc error:

ngcc-jest-processor: running ngcc
Warning: The inferred tsconfig file "root_project/tsconfig.json" appears to be "solution-style" since it contains no root files but does contain project references.
This is probably not wanted, since ngcc is unable to infer settings like "paths" mappings from such a file.
Perhaps you should have explicitly specified one of the referenced projects using the --tsconfig option. For example:

ngcc ... --tsconfig "./projects/projectA/tsconfig.app.json"
ngcc ... --tsconfig "./projects/projectA/tsconfig.spec.json"
ngcc ... --tsconfig "./projects/projectB/tsconfig.app.json"
ngcc ... --tsconfig "./projects/projectB/tsconfig.spec.json"



I appreciate if someone has a working configuration with jest-preset-angular and angular workspaces.

Continue reading...