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

Question

文件结构：

- 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

我遵循了https://thymikee.github.io/jest-preset-angular/docs/getting-started/installation进行安装。

如果我选择https://thymikee.github.io/jest-preset-angular/docs/guides/angular-ivy#control-ngcc-processing，它显然找不到tsconfig.spec.json：

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

在我的情况下，每个项目都有一个 tsconfig.spec.json 文件...

// 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"
  // ]
};

没有使用ngcc跳过：

// 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"
  // ]
};

我遇到了ngcc错误：

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"

如果有人能提供一个在angular工作区中使用 jest-preset-angular 的可用配置，我会非常感激。

- Ambroise Rabier

Answer 1

我已经让它正常工作了：

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"
},

希望对某些人有用！

- José Antonio Postigo