angular - 什么时候需要 compileComponents ？

Question

我正在使用 Testbed 和 jest 将我的组件单元测试迁移到 UI 测试(在我刚刚使用 component = new MyCompontent() 进行单元测试之前)。
我正在使用 Angular 11。
关于compileComponents我有一点不明白.在文档中它说 "You can ignore this section if you only run tests with the CLI ng test command because the CLI compiles the application before running the tests."
我不是在打电话 ng test但是 jest --watch但我的测试在有和没有 compileComponents 的情况下都有效(通过工作，我的意思是他们正确地断言我的观点)。
还有一个"You must call this method if any of the testing module components have a templateUrl or styleUrls because fetching component template and style files is necessarily asynchronous"
我的组件同时使用 templateUrl和 styleUrls

@Component({
  selector: 'app-my-example',
  templateUrl: './my-example.component.html',
  styleUrls: ['./my-example.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class MyExampleComponent {}

那么我缺少什么？如果我最终设置了 CI 或类似内容，我想确保我的测试不会中断。
或者我应该总是打电话compileComponents ?我的印象是，如果不需要，这样做不会那么有效。
那么，究竟是什么时候compileComponents需要吗？
编辑:
这是我的 Jest 配置

module.exports = {
  preset: 'jest-preset-angular',
  setupFilesAfterEnv: ['<rootDir>/src/setupJest.ts'],
  transformIgnorePatterns: ['<rootDir>/node_modules/(?!@ionic|@saninn|@ngrx|@capacitor-community|@capacitor)'],
  watchPathIgnorePatterns: ['/node_modules/', ...ignoredFiles],
  coverageReporters: process.env.CI ? ['text'] : ['lcov'],
  // coverageReporters: ['lcov'],
  // coverageReporters: ['text'],
  testPathIgnorePatterns: ['/node_modules/', ...ignoredFiles],
  modulePathIgnorePatterns: [...ignoredFiles],
  collectCoverage: false,
  notify: true,
  // notifyMode: 'failure',
  coverageDirectory: './coverage',
  collectCoverageFrom: ['<rootDir>/src/**/*.ts', '!**/*.module.ts', '!**/*.enum.ts'],
  coveragePathIgnorePatterns: ['/node_modules/', 'package.json', ...ignoredFiles],
  globals: {
    'ts-jest': {
      tsconfig: '<rootDir>/src/tsconfig.spec.json',
      diagnostics: {
        ignoreCodes: [
          6138, // declared but never read
          6133, // declared but never used,
          2322 // object should just have known keys
        ]
      }
    }
  }
};

Answer 1

我怀疑您在运行 ng test 之间看不出任何区别和 jest命令，因为您的 Jest 配置使用 jest-preset-angular涉及它自己的 Angular 替换资源转换器 https://github.com/thymikee/jest-preset-angular/blob/master/src/transformers/replace-resources.ts

 * Given the input
 * @Component({
 *   selector: 'foo',
 *   templateUrl: './foo.component.html`,
 *   styleUrls: ['./foo.component.scss'],
 *   styles: [`h1 { font-size: 16px }`],
 * })
 *
 * Produced the output for `CommonJS`
 * @Component({
 *   selector: 'foo',
 *   templateUrl: require('./foo.component.html'),
 *   styles: [],
 * })

这类似于 Angular CLI https://github.com/angular/angular-cli/blob/master/packages/ngtools/webpack/src/transformers/replace_resources.ts
也可以看看:

Do you know how Angular transforms your code?