unit-testing - 在 Angular 8 (Karma 4.1.0) 升级后，在 Angular 7 (Karma 2.0.4) 中成功完成的 Karma 测试失败

Question

我们有一套约 1100 个单元在 'ng test' 中运行，目前在 Angular 7.2.5 中运行到约 4 分钟内完成，在 Angular 7.2.5 中没有失败，并且在 Angular 中 4 分钟前无法运行到随机故障、减速和断开连接8.0.0。

测试在 Angular 7 中的 Chrome 或 ChromeHeadless 中成功运行。

已经尝试过:

为了消除样式元素的已知内存泄漏，我们实现了“样式清理”here :

通过运行 cleanStylesFromDOM在 afterAll对于 1100 次测试中的每个描述块。

在 Angular 8 中，我们尝试将 Karma 从 4.1.0 回归到 3.0.0，将 jasmine-core 从 3.4.0 回归到 2.99.1，但没有成功。

使用 Karma 4.1.0 和 jasmine-core 3.4.0 尝试了 Angular 8.1.1，但没有成功。

增加 Karma 超时:

browserNoActivityTimeout: 120000, captureTimeout: 60000, reportSlowerThan: 2000, browserDisconnectTolerance: 2, browserDisconnectTimeout: 20000, browserSocketTimeout: 20000, processKillTimeout: 20000

将 Node.js 的内存增加到 --max_old_space_size=8192

关闭“ng test”源映射生成并观看

在 karma.conf.js 中随机关闭 Jasmine:jasmine: {
 
random: false,
  failFast: true,
  timeoutInterval: 1000
}

对于每个“describe”块中的每个“it”，使用fixture.destroy

调用afterEach

尝试按照建议将 beforeEach TestBed 设置更改为 beforeAll here :

包.json

{
  "name": "myapp",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~8.0.0",
    "@angular/common": "~8.0.0",
    "@angular/compiler": "~8.0.0",
    "@angular/core": "~8.0.0",
    "@angular/forms": "~8.0.0",
    "@angular/platform-browser": "~8.0.0",
    "@angular/platform-browser-dynamic": "~8.0.0",
    "@angular/router": "~8.0.0",
    "@ng-bootstrap/ng-bootstrap": "^4.0.0",
    "@ng-select/ng-select": "^2.20.0",
    "@ngrx/effects": "^8.0.1",
    "@ngrx/entity": "^8.0.1",
    "@ngrx/router-store": "^8.0.1",
    "@ngrx/store": "^8.0.1",
    "@ngrx/store-devtools": "^8.0.1",
    "@ngx-translate/core": "^11.0.1",
    "angular-resizable-element": "^3.2.4",
    "angular-split": "^3.0.1",
    "bootstrap": "^4.1.3",
    "core-js": "^2.6.9",
    "jquery": "^3.3.1",
    "jquery-ui": "^1.12.1",
    "jquery-ui-bundle": "^1.11.4",
    "jquery.fancytree": "^2.26.0",
    "lodash": "^4.17.11",
    "moment": "^2.17.1",
    "ngx-infinite-scroll": "^7.2.0",
    "ngx-nvd3": "^1.0.9",
    "ngx-restangular": "^5.0.0-rc1",
    "popper.js": "^1.15.0",
    "rxjs": "~6.4.0",
    "tslib": "^1.9.0",
    "ui-contextmenu": "^1.18.1",
    "urijs": "^1.18.6",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.800.0",
    "@angular/cli": "~8.0.2",
    "@angular/compiler-cli": "~8.0.0",
    "@angular/language-service": "~8.0.0",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/jquery": "^3.3.29",
    "@types/jquery.fancytree": "^2.7.32",
    "@types/node": "^8.9.5",
    "codelyzer": "^5.0.0",
    "jasmine-core": "~3.4.0",
    "jasmine-marbles": "^0.6.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~5.4.0",
    "ts-mockito": "^2.3.1",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.4.3",
    "webpack": "^4.37.0"
  }
}

karma 配置文件

module.exports = function (config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine', '@angular-devkit/build-angular'],
    browsers: ['ChromeHeadless'],
    plugins: [
      require('karma-jasmine'),
      require('karma-chrome-launcher'),
      require('karma-jasmine-html-reporter'),
      require('karma-coverage-istanbul-reporter'),
      require('@angular-devkit/build-angular/plugins/karma')
    ],
    client: {
      clearContext: false // leave Jasmine Spec Runner output visible in browser
    },
    coverageIstanbulReporter: {
      dir: require('path').join(__dirname, './coverage/webr3'),
      reports: ['html', 'lcovonly', 'text-summary'],
      fixWebpackSourcePaths: true
    },
    reporters: ['progress', 'kjhtml'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    singleRun: false,
    restartOnFileChange: true
  });
};

测试示例:

describe('PageNotFoundComponent', () => {
  let component: PageNotFoundComponent;
  let fixture: ComponentFixture<PageNotFoundComponent>;
  let selectedTextElement: HTMLElement;
  let router;
  let location;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        TranslateModule.forRoot({
          loader: {
            provide: TranslateLoader,
            useClass: WebpackTranslateLoader
          }
        }),
        RouterTestingModule.withRoutes(
          [
            {
              path: 'basepath',
              redirectTo: 'nwi'
            },
            {
              path: '**',
              component: PageNotFoundComponent
            }
          ]
        ),
      ],
      declarations: [ PageNotFoundComponent ]
    })
    .compileComponents();
  }));

  afterAll(() => {
    cleanStylesFromDOM();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(PageNotFoundComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
    router = TestBed.get(Router);
    location = TestBed.get(Location);
  });

  it('should show 404 text', fakeAsync(() => {
    const navigationExtras: NavigationExtras = {
      queryParams: {}
    };
    router.navigate([`/unknown`], navigationExtras);
    tick();
    expect(decodeURI(location.path())).toBe(`/unknown`);
    const textElement: HTMLElement = fixture.nativeElement;
    selectedTextElement = textElement.querySelector('p');
    expect(selectedTextElement.innerText).toEqual('404');
  }));
});

我们希望大约 1100 次测试能够像在 Angular 7 中那样，在 Angular 8 中运行完成而不会出现故障。

以下是不应该发生的故障:

Chrome 75.0.3770 (Mac OS X 10.13.6) VMComponent should verify the Vul Suppressions get renders correctly FAILED TypeError: Cannot read property 'className' of null at at UserContext. (http://localhost:9876/_karma_webpack_/webpack:/src/app/components/vm-disabled-risk-radius/vm-disabled-risk-radius.component.spec.ts:72:18) at ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-evergreen.js:359:1) at ProxyZoneSpec.onInvoke (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-testing.js:308:1) at ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-evergreen.js:358:1) at Zone.run (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-evergreen.js:124:1) at runInTestZone (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-testing.js:561:1) at UserContext. (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-testing.js:576:1) at

... and 20 more random failures and finally disconnects:

24 07 2019 12:30:11.055:WARN [Chrome 75.0.3770 (Mac OS X 10.13.6)]: Disconnected (0 times)reconnect failed before timeout of 2Chrome 75.0.3770 (Mac OS X 10.13.6) ERROR Disconnected reconnect failed before timeout of 2000ms (transport error) Chrome 75.0.3770 (Mac OS X 10.13.6): Executed 582 of 1134 (20 FAILED) (skipped 3) DISCONNECTED (4 mins 7.005 secs / 3 mins 53.442 secs)

Answer 1

不知道是什么cleanStylesFromDOM你提到了，但最近我在 1800 测试大型套件中遇到了类似的问题。症状相似:

运行结束时的测试超时:

FAILED
Error: Timeout - Async function did not complete within 5000ms (set by jasmine.DEFAULT_TIMEOUT_INTERVAL)
at <Jasmine>

在资源受限的环境(即 CI)中运行永远不稳定。

性能分析表明，每次测试后， <style> 的数量 <head> 中的标签稳步增加。团队不确定这是否是原因，但我们决定将次优资源管理作为主要嫌疑人解决，类似于您的 cleanStylesFromDOM .还好去年 this PR被合并了，所以没有额外的 afterEach不再需要调用。要在每次测试后强制进行 Angular 清理，请更新“test.ts”中的测试台初始化，如下所示:

getTestBed().initTestEnvironment(
  BrowserDynamicTestingModule,
  platformBrowserDynamicTesting(),
  {teardown: {destroyAfterEach: true}}
);

{teardown: {destroyAfterEach: true}}是兴趣线。很遗憾， documentation不多说 destroyAfterEach .对我来说，打开设置最终会导致稳定、始终绿色的运行:

它揭示了测试中的错误，这些错误在单个测试期间被资源重用所掩盖。我能够在本地重现和修复许多不稳定的测试实例。

不再有超时，<style> s 被清理干净。资源消耗下降。

CI 中的不稳定测试集变得稳定了，我能够禁用它们以便以后解决它们。