在 angular13 中运行 jest：模块“DynamicTestModule”导入了意外值“TranslateModule”。请添加@NgModule注释

Question

我有一个 Angular 12 项目的测试，效果很好。我已将项目升级到 Angular 13，但现在它们不起作用。

这是我的测试文件：

import { Component } from '@angular/core';
import { ComponentFixture, fakeAsync, TestBed, tick, waitForAsync } from '@angular/core/testing';
import { TranslateModule, TranslateService } from '@ngx-translate/core';
import { GlobalTestingUtilities } from './global-testing-utilities';

@Component({
  template: `
    <div id="test-div-with-click-event-id"
     class="test-div-with-click-event-class"
     (click)="onTestDivClick()">
    </div>
  `
})
class ButtonClickTestComponent {
   public onTestDivClick(): void {}
}

describe('GlobalUtilities', () => {
  let component: ButtonClickTestComponent;
  let fixture: ComponentFixture<ButtonClickTestComponent>;
  let testTranslateService: TranslateService;
  const globalTestingUtilitesInstance = new GlobalTestingUtilities();

  beforeEach(waitForAsync(() => {
    TestBed.configureTestingModule({
      declarations: [
        ButtonClickTestComponent
      ],
      imports: [TranslateModule.forRoot()],
      providers: [TranslateService]
    }).compileComponents();

  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(ButtonClickTestComponent);
    testTranslateService = TestBed.inject(TranslateService);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  afterEach(() => {
    fixture && fixture.destroy();
  });

  test('should create', () => {
    expect(globalTestingUtilitesInstance).toBeTruthy();
  });

但我收到这个错误：

模块“DynamicTestModule”导入了意外值“TranslateModule”。请添加 @NgModule 注释。

  34 |
  35 |   beforeEach(() => {
> 36 |     fixture = TestBed.createComponent(ButtonClickTestComponent);
     |                       ^
  37 |     testTranslateService = TestBed.inject(TranslateService);
  38 |     component = fixture.componentInstance;
  39 |     fixture.detectChanges();

对我来说似乎是正确的，所以我不知道出了什么问题。我在用着：

• "开玩笑": "^27.4.7",
• "jest-canvas-mock": "^2.3.1",
• “玩笑预设角度”：“^11.1.0”

设置-jest.ts：

import 'jest-preset-angular/setup-jest';
import 'jest-canvas-mock'

和 package.json 中的笑话设置：

"jest": {
    "preset": "jest-preset-angular",
    "setupFilesAfterEnv": [
      "<rootDir>/setup-jest.ts"
    ],
    "testTimeout": 10000,
    "collectCoverage": true,
    "collectCoverageFrom": [
      "<rootDir>/src/**/*.ts",
      "!<rootDir>/src/**/*.interface.ts",
      "!<rootDir>/src/**/*.spec.ts"
    ],
    "coverageReporters": [
      "text-summary"
    ],
    "coverageThreshold": {
      "global": {
        "branches": 50,
        "functions": 50,
        "lines": 50,
        "statements": 50
      }
    }
  },

预计到达时间：这是完整的堆栈跟踪：

 at verifySemanticsOfNgModuleDef (node_modules/@angular/core/fesm2015/core.mjs:23854:19)
 at node_modules/@angular/core/fesm2015/core.mjs:23865:9
     at Array.forEach (<anonymous>)
 at verifySemanticsOfNgModuleDef (node_modules/@angular/core/fesm2015/core.mjs:23863:60)
 at Function.get (node_modules/@angular/core/fesm2015/core.mjs:23825:21)
 at R3TestBedCompiler.applyProviderOverridesToModule (node_modules/@angular/core/fesm2015/testing.mjs:1066:29)
 at R3TestBedCompiler.compileTestModule (node_modules/@angular/core/fesm2015/testing.mjs:1314:14)
 at R3TestBedCompiler.finalize (node_modules/@angular/core/fesm2015/testing.mjs:920:14)
 at TestBedRender3.get testModuleRef [as testModuleRef] (node_modules/@angular/core/fesm2015/testing.mjs:1795:49)
 at TestBedRender3.inject (node_modules/@angular/core/fesm2015/testing.mjs:1718:29)
 at TestBedRender3.createComponent (node_modules/@angular/core/fesm2015/testing.mjs:1758:44)
 at Function.createComponent (node_modules/@angular/core/fesm2015/testing.mjs:1616:37)
 at src/app/global-classes/global-testing-utilities.spec.ts:36:23
 at ZoneDelegate.Object.<anonymous>.ZoneDelegate.invoke (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:407:30)
 at ProxyZoneSpec.Object.<anonymous>.ProxyZoneSpec.onInvoke (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:3765:43)
 at ZoneDelegate.Object.<anonymous>.ZoneDelegate.invoke (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:406:56)
 at Zone.Object.<anonymous>.Zone.run (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:167:47)
 at Object.wrappedFunc (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:4250:34)

Answer 1

我遇到了同样的问题。我在文件中缺少以下配置jest.config.js。

globalSetup: 'jest-preset-angular/global-setup'

Answer 2

我认为 @ngx-translate/core 的版本可能是个问题，确实如此。我们的 Angular 12 项目使用的是 13.0.0，但我将其升级到 14.0.0，现在我的测试通过了。