Angular-jest：单个单元测试需要 1500 秒才能完成

Question

我是用笑话进行角度单元测试的新手。并使用 jest 配置项目，如下所述。

每次 --clearCache 之后，运行一个简单的单元测试需要 500 到 1500 秒。但第一次运行单元测试在 30 秒内完成。这主要导致在管道内运行时出现问题。

我环顾四周，发现人们面临着旧版本笑话的问题。也尝试过调整，但没有帮助。

单元测试报告 单元测试报告

单元测试

describe('LoginPage', () => {
  let component: any;
  let harness: RouterTestingHarness;
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [SigninComponent, ToastComponent, InputComponent],
      imports: [CommonModule,BrowserAnimationsModule, RouterTestingModule,MyCommonLibModule FormsModule],
      providers: [
        provideRouter([{
          path: 'auth/signin',
          component: SigninComponent
        }]), Router,
        { provide: AuthenticationService, useValue: { CognitoUserpoolLogin: jest.fn() } },
        { provide: AuthIntegrationService, useValue: { triggerEventOnLogin: jest.fn() } },
        { provide: ActivatedRoute, useValue: { params: of({ page: '' }), } }

      ],
    }).compileComponents();
    harness =  await RouterTestingHarness.create();
    component = await harness.navigateByUrl('auth/signin');
  });
  it('should create the app', async() => {
    expect(component).toBeInstanceOf(SigninComponent);
  });
})

package

"@angular/core": "^16.2.0",
"jest": "^29.7.0",
"jest-preset-angular": "^14.0.0",
"@types/jest": "^29.5.11",
"ts-node": "^10.9.2",
"tslib": "^2.3.0",

tsconfig.spec.ts

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/spec",
    "types": [
      "jest" // 1
    ],
    "esModuleInterop": true, // 2
    "emitDecoratorMetadata": true // 3
  },
  "files": [
    "src/polyfills.ts"
  ],
  "include": [
    "src/**/*.spec.ts",
    "src/**/*.d.ts"
  ]
}

Jest Config

const esModules = ['ngx-otp-input','@angular', '@ngrx', "@mylib/my-common-lib", "@aws-amplify", "@aws-sdk", "ngx-cookie-service", "ngx-spinner", "primeng"];

const config: Config = {
modulePaths: ["<rootDir>"],
clearMocks: true,
collectCoverage: true,
coverageDirectory: "coverage",
coverageProvider: "v8",
moduleDirectories: [
    "node_modules"
  ],
preset: 'jest-preset-angular',
setupFilesAfterEnv: ['<rootDir>/setup-jest.ts'],
testEnvironment: "jsdom",
transformIgnorePatterns: [
    `<rootDir>/node_modules/(?!${esModules.join('|')})`
  ],
}

Answer 1

为什么要导航然后运行测试用例，直接做就可以了！使用

createComponent

创建组件并使用

fixture.debugElement.componentInstance

访问实例

describe('LoginPage', () => {
  let component: any;
  let harness: RouterTestingHarness;
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [SigninComponent, ToastComponent, InputComponent],
      imports: [CommonModule,BrowserAnimationsModule, RouterTestingModule,MyCommonLibModule FormsModule],
      providers: [
        Router,
        { provide: AuthenticationService, useValue: { CognitoUserpoolLogin: jest.fn() } },
        { provide: AuthIntegrationService, useValue: { triggerEventOnLogin: jest.fn() } },
        { provide: ActivatedRoute, useValue: { params: of({ page: '' }), } }

      ],
    }).compileComponents();
  });

  it('should create the app', async() => {
    const fixture = TestBed.createComponent(AppComponent);
    component = fixture.debugElement.componentInstance;
    expect(component).toBeInstanceOf(SigninComponent);
  });
})