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

Posted 2023-03-13

【中文标题】Angular 4 单元测试（TestBed）非常慢

【英文标题】：Angular 4 Unit Tests (TestBed) extremely slow

【发布时间】：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 测试时使用哪种浏览器？

【参考方案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 功能？它在所有情况下都有效吗？ - 刚刚找到关于重置为旧的解决方案：***.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();
       );
    ;