究竟什么时候需要 compileComponents？

Question

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

我正在使用 Angular11.

关于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？

编辑：

这是我的笑话配置

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/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?

究竟什么时候需要 compileComponents？

When exactly is compileComponents needed?

testbed

jestjs

angular