使用 angular 工作区配置 `jest-preset-angular`

Question

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.

Answer 1

I got it working with:

workspace-project/jest-config.js

module.exports = {
  preset: 'jest-preset-angular',
  globalSetup: 'jest-preset-angular/global-setup',
  setupFilesAfterEnv: [ '<rootDir>/../../setup-jest.ts' ]
};

workspace-project/setup-jest.ts

import 'jest-preset-angular/setup-jest';

workspace-project/projects/my-library1/jest.config.js

const baseConfig = require('../../jest.config');

module.exports = {
  ...baseConfig,
  coverageDirectory: '<rootDir>/../../dist/my-library1/__coverage'
};

workspace-project/tsconfig.spec.js

workspace-project/projects/my-library1/tsconfig.spec.json

...
"compilerOptions": {
  ...
  "module": "CommonJs",
  "types": [ "jest" ]
}

workspace-project/package.json

...
"scripts": {
  ...
  "test:my-library1": "jest --config ./projects/my-library1/jest.config.js"
},

I hope it's usefull for someone!