到底什么时候需要compileComponents？

Question

我正在将仅使用 jest 的组件单元测试迁移到使用 Testbed 和 jest 的 UI 测试（在我仅使用 jest 进行单元测试之前component = new MyCompontent()）。

我正在使用 Angular 11。

有件事我不明白compileComponents。在文档中，它说“如果您只使用 CLI ng test 命令运行测试，则可以忽略此部分，因为 CLI 在运行测试之前编译应用程序。”

我没有打电话ng test，但jest --watch我的测试无论有没有都有效compileComponents（我所说的工作是指它们正确地断言了我的观点）。

还有一个“如果任何测试模块组件具有 templateUrl 或 styleUrls，则必须调用此方法，因为获取组件模板和样式文件必然是异步的”

我的组件同时使用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需要呢？

编辑：

这是我的笑话配置

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-preset-angular涉及其自己的 Angular 替换资源转换器https://github.com/thymikee/jest-preset-angular/blob/master/src/transformers/替换资源.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

也可以看看：

• 你知道 Angular 如何转换你的代码吗？