Angular 4 单元测试（TestBed）非常慢答案

【问题标题】：Angular 4 Unit Tests (TestBed) extremely slowAngular 4 单元测试（TestBed）非常慢
【发布时间】：2018-05-21 08:41:43
【问题描述】：

我有一些使用 Angular TestBed 的单元测试。即使测试非常简单，它们的运行速度也非常慢（平均每秒 1 个测试资产）。
即使在重新阅读 Angular 文档后，我也找不到性能如此糟糕的原因。

独立测试，不使用 TestBed，只需几分之一秒即可运行。

单元测试

import { Component } from "@angular/core";
import { ComponentFixture, TestBed, async } from "@angular/core/testing";
import { By } from "@angular/platform-browser";
import { DebugElement } from "@angular/core";
import { DynamicFormDropdownComponent } from "./dynamicFormDropdown.component";
import { NgbModule } from "@ng-bootstrap/ng-bootstrap";
import { FormsModule } from "@angular/forms";
import { DropdownQuestion } from "../../element/question/questionDropdown";
import { TranslateService } from "@ngx-translate/core";
import { TranslatePipeMock } from "../../../../tests-container/translate-pipe-mock";

describe("Component: dynamic drop down", () => {

    let component: DynamicFormDropdownComponent;
    let fixture: ComponentFixture<DynamicFormDropdownComponent>;
    let expectedInputQuestion: DropdownQuestion;
    const emptySelectedObj = { key: "", value: ""};

    const expectedOptions = {
        key: "testDropDown",
        value: "",
        label: "testLabel",
        disabled: false,
        selectedObj: { key: "", value: ""},
        options: [
            { key: "key_1", value: "value_1" },
            { key: "key_2", value: "value_2" },
            { key: "key_3", value: "value_3" },
        ],
    };

    beforeEach(async(() => {
        TestBed.configureTestingModule({
            imports: [NgbModule.forRoot(), FormsModule],
            declarations: [DynamicFormDropdownComponent, TranslatePipeMock],
            providers: [TranslateService],
        })
            .compileComponents();
    }));

    beforeEach(() => {
        fixture = TestBed.createComponent(DynamicFormDropdownComponent);

        component = fixture.componentInstance;

        expectedInputQuestion = new DropdownQuestion(expectedOptions);
        component.question = expectedInputQuestion;
    });

    it("should have a defined component", () => {
        expect(component).toBeDefined();
    });

    it("Must have options collapsed by default", () => {
        expect(component.optionsOpen).toBeFalsy();
    });

    it("Must toggle the optionsOpen variable calling openChange() method", () => {
        component.optionsOpen = false;
        expect(component.optionsOpen).toBeFalsy();
        component.openChange();
        expect(component.optionsOpen).toBeTruthy();
    });

    it("Must have options available once initialized", () => {
        expect(component.question.options.length).toEqual(expectedInputQuestion.options.length);
    });

    it("On option button click, the relative value must be set", () => {
        spyOn(component, "propagateChange");

        const expectedItem = expectedInputQuestion.options[0];
        fixture.detectChanges();
        const actionButtons = fixture.debugElement.queryAll(By.css(".dropdown-item"));
        actionButtons[0].nativeElement.click();
        expect(component.question.selectedObj).toEqual(expectedItem);
        expect(component.propagateChange).toHaveBeenCalledWith(expectedItem.key);
    });

    it("writeValue should set the selectedObj once called (pass string)", () => {
        expect(component.question.selectedObj).toEqual(emptySelectedObj);
        const expectedItem = component.question.options[0];
        component.writeValue(expectedItem.key);
        expect(component.question.selectedObj).toEqual(expectedItem);
    });

    it("writeValue should set the selectedObj once called (pass object)", () => {
        expect(component.question.selectedObj).toEqual(emptySelectedObj);
        const expectedItem = component.question.options[0];
        component.writeValue(expectedItem);
        expect(component.question.selectedObj).toEqual(expectedItem);
    });
});

目标组件（带模板）

import { Component, Input, OnInit, ViewChild, ElementRef, forwardRef } from "@angular/core";
import { FormGroup, ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms";
import { DropdownQuestion } from "../../element/question/questionDropdown";

@Component({
    selector: "df-dropdown",
    templateUrl: "./dynamicFormDropdown.component.html",
    styleUrls: ["./dynamicFormDropdown.styles.scss"],
    providers: [
        {
            provide: NG_VALUE_ACCESSOR,
            useExisting: forwardRef(() => DynamicFormDropdownComponent),
            multi: true,
        },
    ],
})
export class DynamicFormDropdownComponent implements ControlValueAccessor {
    @Input()
    public question: DropdownQuestion;

    public optionsOpen: boolean = false;

    public selectItem(key: string, value: string): void {
        this.question.selectedObj = { key, value };
        this.propagateChange(this.question.selectedObj.key);
    }

    public writeValue(object: any): void {
        if (object) {
            if (typeof object === "string") {
                this.question.selectedObj = this.question.options.find((item) => item.key === object) || { key: "", value: "" };
            } else {
                this.question.selectedObj = object;
            }
        }
    }

    public registerOnChange(fn: any) {
        this.propagateChange = fn;
    }

    public propagateChange = (_: any) => { };

    public registerOnTouched() {
    }

    public openChange() {
        if (!this.question.disabled) {
            this.optionsOpen = !this.optionsOpen;
        }
    }

    private toggle(dd: any) {
        if (!this.question.disabled) {
            dd.toggle();
        }
    }
}

-----------------------------------------------------------------------

<div>
    <div (openChange)="openChange();" #dropDown="ngbDropdown" ngbDropdown class="wrapper" [ngClass]="{'disabled-item': question.disabled}">
        <input type="text" 
                [disabled]="question.disabled" 
                [name]="controlName" 
                class="select btn btn-outline-primary" 
                [ngModel]="question.selectedObj.value | translate"
                [title]="question.selectedObj.value"
                readonly ngbDropdownToggle #selectDiv/>
        <i (click)="toggle(dropDown);" [ngClass]="optionsOpen ? 'arrow-down' : 'arrow-up'" class="rchicons rch-003-button-icon-referenzen-pfeil-akkordon"></i>
        <div ngbDropdownMenu aria-labelledby="dropdownBasic1" class="option-wrapper">
            <button *ngFor="let opt of question.options; trackBy: opt?.key" (click)="selectItem(opt.key, opt.value); dropDown.close();"
                class="dropdown-item option" [disabled]="question.disabled">{{opt.value | translate}}</button>
        </div>
    </div>
</div>

业力配置

var webpackConfig = require('./webpack/webpack.dev.js');

module.exports = function (config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine'],
    plugins: [
      require('karma-webpack'),
      require('karma-jasmine'),
      require('karma-phantomjs-launcher'),
      require('karma-sourcemap-loader'),
      require('karma-tfs-reporter'),
      require('karma-junit-reporter'),
    ],

    files: [
      './app/polyfills.ts',
      './tests-container/test-bundle.spec.ts',
    ],
    exclude: [],
    preprocessors: {
      './app/polyfills.ts': ['webpack', 'sourcemap'],
      './tests-container/test-bundle.spec.ts': ['webpack', 'sourcemap'],
      './app/**/!(*.spec.*).(ts|js)': ['sourcemap'],
    },
    webpack: {
      entry: './tests-container/test-bundle.spec.ts',
      devtool: 'inline-source-map',
      module: webpackConfig.module,
      resolve: webpackConfig.resolve
    },
    mime: {
      'text/x-typescript': ['ts', 'tsx']
    },

    reporters: ['progress', 'junit', 'tfs'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['PhantomJS'],
    singleRun: false,
    concurrency: Infinity
  })
}

【问题讨论】：

不要在 fixture.detectChanges() 内部运行 beforeEach
我将问题中的测试替换为另一个测试。只有当我需要检查/测试更改的值时，我才使用 fixture.detectChanges()，但测试需要 15 秒才能运行（It 部分平均需要 2 秒）。会不会是 Karma 设置/构建瓶颈？
不完全是，可能是因为你的组件需要很长时间来初始化
它可能是，但是其他组件，甚至比问题中的上述组件更简单，需要相同的时间来运行。因此，我认为它与测试的基础设施有关，而不是底层组件。
您在运行 Angular 测试时使用哪种浏览器？

标签： angular performance unit-testing testbed

【解决方案1】：

如果您正在使用Angular 12.1+（如果不是那么最好迁移到新版本），那么最好的方法就是引入teardown 属性，这将惊人地提高单元测试的执行速度，原因如下：

宿主元素已从 DOM 中移除
组件样式已从 DOM 中移除
应用程序范围的服务被破坏
使用 any provider 范围的功能级服务被销毁
Angular 模块被破坏
组件被销毁
组件级服务被破坏
上述所有事情都会在每次单元测试执行后发生。

只需打开test-main.ts 文件并输入以下代码：

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

【讨论】：

感谢您的评论。然而问题是 4 年前提出的......那个项目现在早就关闭了 :) 然而，我们可以在那个时候找到一个好的解决方案（见下面我的回答）
这仅供您参考！因为现在每个人都热衷于改进这个过程。你已经达到那个水平真是太好了。

【解决方案2】：

在我的具体情况下，它延迟了，因为我们在我们的组件样式“component.component.scss”中导入了我们的styles.scss（也正在导入其他巨大的样式），这会为每个组件模板生成递归样式。

为避免这种情况，请仅在组件中导入 scss 变量、mixin 和类似的东西。

【讨论】：

【解决方案3】：

2020 年 10 月更新

将 Angular 应用升级到 Angular 9 具有大量测试运行时间改进，

如果您想继续使用当前版本，以下软件包帮助我提高了测试性能：

吴子弹 link

Ng-Bullet 是一个库，可通过 Angular TestBed 增强您的单元测试体验，大大提高测试的执行速度。

它会做的是它不会一直创建测试套件，而是使用之前创建的套件，通过使用它，我已经看到了 300% 改进的测试运行。

Ref

【讨论】：

感谢 Ivy - Angular 单元测试开箱即用的速度要快得多，因为组件不会在测试之间重新编译，因此测试运行得更快。

【解决方案4】：

Yoav Schniederman 的回答对我很有帮助。要添加，我们需要清理 <head> 标记中的 <style>，因为它们也会导致内存泄漏。清理 afterAll() 中的所有样式也可以很好地提高性能。

请阅读original post以供参考

【讨论】：

请将代码和数据添加为文本 (using code formatting)，而不是图像。图片：A）不允许我们复制粘贴代码/错误/数据进行测试； B) 不允许根据代码/错误/数据内容进行搜索；和many more reasons。除了代码格式的文本之外，只有在图像添加了一些重要的东西，而不仅仅是文本代码/错误/数据传达的内容时，才应该使用图像。

【解决方案5】：

原来问题出在 Angular 上，正如 Github 中所述

下面是 Github 讨论中的一个解决方法，它在我们的项目中将运行测试的时间从 40 多秒缩短到仅 1 秒 (!)。

const oldResetTestingModule = TestBed.resetTestingModule;

beforeAll((done) => (async () => {
  TestBed.resetTestingModule();
  TestBed.configureTestingModule({
    // ...
  });

  function HttpLoaderFactory(http: Http) {
    return new TranslateHttpLoader(http, "/api/translations/", "");
  }

  await TestBed.compileComponents();

  // prevent Angular from resetting testing module
  TestBed.resetTestingModule = () => TestBed;
})()
  .then(done)
  .catch(done.fail));

【讨论】：

听起来不错。但是您如何/何时重置为旧的 resetTestingModule 功能？它在所有情况下都有效吗？ - 刚刚找到关于重置为旧的解决方案：stackoverflow.com/a/54351795/2176962
@hgoebl 在我们所有的情况下，这个解决方案都有效，但是这可能会根据具体情况而有所不同。下面 Granfaloon 提出的方法似乎是覆盖潜在测试冲突情况的好方法。

【解决方案6】：

我做了一个小功能，你可以用它来加快速度。它的效果类似于其他答案中提到的ng-bullet，但仍然会清理测试之间的服务，使它们不会泄漏状态。函数为precompileForTests，在n-ng-dev-utils可用。

像这样使用它（来自它的文档）：

// let's assume `AppModule` declares or imports a `HelloWorldComponent`
precompileForTests([AppModule]);

// Everything below here is the same as normal. Just add the line above.

describe("AppComponent", () => {
  it("says hello", async () => {
    TestBed.configureTestingModule({ declarations: [HelloWorldComponent] });
    await TestBed.compileComponents(); // <- this line is faster
    const fixture = TestBed.createComponent(HelloWorldComponent);
    expect(fixture.nativeElement.textContent).toContain("Hello, world!");
  });
});

【讨论】：

我不明白这第一行 precompileForTests... 为什么它有一个 AppModule？
您应该在那里指定您的主模块，它包含您应用程序中的所有内容。然后它将预先为您的所有测试预编译所有内容，而不是在每次测试之前重新编译。
我真的不明白，因为你的测试应该与任何现实生活中的实现隔离，对吧？
这是一个口味问题，但无论如何这不会增加/删除与测试本身的任何隔离。它的行为与没有 precomileForTests() 调用时一样，除了当 Angular 正常编译 HelloWorldComponent 时它不必这样做，因为它已经预编译了。

【解决方案7】：

您可能想试试ng-bullet。它极大地提高了 Angular 单元测试的执行速度。还建议在有关 Test Bed 单元测试性能的官方 angular repo 问题中使用它：https://github.com/angular/angular/issues/12409#issuecomment-425635583

重点是在每个测试文件的头部替换原来的beforeEach

beforeEach(async(() => {
        // a really simplified example of TestBed configuration
        TestBed.configureTestingModule({
            declarations: [ /*list of components goes here*/ ],
            imports: [ /* list of providers goes here*/ ]
        })
        .compileComponents();
  }));

使用 configureTestSuite：

import { configureTestSuite } from 'ng-bullet';
...
configureTestSuite(() => {
    TestBed.configureTestingModule({
        declarations: [ /*list of components goes here*/ ],
        imports: [ /* list of providers goes here*/ ]
    })
});

【讨论】：

感谢分享我们复制了代码并将其修改到我们的项目中 - 很棒而且简单

【解决方案8】：

Francesco 上面的回答很棒，但最后需要这段代码。否则其他测试套件将失败。

    afterAll(() => {
        TestBed.resetTestingModule = oldResetTestingModule;
        TestBed.resetTestingModule();
    });

【讨论】：

【解决方案9】：

describe('Test name', () => {
    configureTestSuite();

    beforeAll(done => (async () => {
       TestBed.configureTestingModule({
            imports: [HttpClientTestingModule, NgReduxTestingModule],
            providers: []
       });
       await TestBed.compileComponents();

    })().then(done).catch(done.fail));

    it(‘your test', (done: DoneFn) => {

    });
});

创建新文件：

    import { getTestBed, TestBed, ComponentFixture } from '@angular/core/testing';
    import { } from 'jasmine';

    export const configureTestSuite = () => {
       const testBedApi: any = getTestBed();
       const originReset = TestBed.resetTestingModule;

       beforeAll(() => {
         TestBed.resetTestingModule();
         TestBed.resetTestingModule = () => TestBed;
       });

       afterEach(() => {
         testBedApi._activeFixtures.forEach((fixture: ComponentFixture<any>) => fixture.destroy());
         testBedApi._instantiated = false;
       });

       afterAll(() => {
          TestBed.resetTestingModule = originReset;
          TestBed.resetTestingModule();
       });
    };

【讨论】：