究竟什么时候需要 compileComponents？答案

【问题标题】：When exactly is compileComponents needed?究竟什么时候需要 compileComponents？
【发布时间】：2021-04-15 12:34:42
【问题描述】：

我正在将仅使用 jest 的组件单元测试迁移到使用 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？

编辑：

这是我开玩笑的配置

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

【问题讨论】：

你能告诉我们更多关于你的配置吗？你在使用 Angular CLI 吗？你是如何配置 jest 的？
嗨@yurzui 我已将我的 jest.config.js 文件添加到帖子中。谢谢！
你正在使用 jest-preset-angular 包括资源转换器 github.com/thymikee/jest-preset-angular/blob/master/src/… 它与 Angular CLI 在编译应用程序时所做的相同
我明白了。谢谢！你能把这个放在答案上吗？

标签： angular jestjs testbed

【解决方案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?

【讨论】：