Question

我在测试我的一个组件时遇到了一些麻烦。测试如下：

describe('SmpEventsNewCompactEventComponent', () => {

  const specService: SmpSpecService = new SmpSpecService();

  describe('Component rendering', () => {
    let componentInstance: any;
    let componentFixture: ComponentFixture<any>;
    let cssSelector: string;

    beforeEach(() => {
      TestBed.configureTestingModule({
        imports: [
          MaterialModule.forRoot()
        ],
        declarations: [
          SmpEventsCompactEventComponent,
          SmpEventsAddressComponent
        ],
        providers: [
          { provide: SMP_OT_HELPER, useValue: newOtHelperInstance() },
          DatePipe,
          SmpEventTypeCheckerService,
          SmpLangService
        ]
      });

      componentFixture = TestBed.createComponent(SmpEventsCompactEventComponent);
      componentInstance = componentFixture.componentInstance;
    });

    describe('Global', () => {
      it('GIVEN there are date/time AND address ' +
        'WHEN component loads THEN display event', () => {
          //// TEST ONE
          componentInstance.isEventEnabled = true;
          cssSelector = '.events-compact-event';

          let debugElement = specService.queryDebugElement(
            componentFixture, cssSelector);

          expect(debugElement).not.toBeNull();
        });

      it('GIVEN there are no date/time AND no address ' +
        'WHEN component loads THEN do not display event', () => {
          //// TEST TWO
          componentInstance.isEventEnabled = true;
          //componentInstance.isAddressEnabled = false;
          // componentInstance.isDateEnabled = false;
          cssSelector = '.events-compact-event';

          let debugElement = specService.queryDebugElement(
            componentFixture, cssSelector);

            console.log('--------------', debugElement.nativeElement);
          // expect(debugElement.nativeElement).toBe(null);
          // expect(true).toBe(true);
          expect(debugElement).not.toBeNull();
        });
    });
});

specService.queryDebugElement如下：

  queryDebugElement(fixture: ComponentFixture<any>, cssSelector: string): DebugElement {
    fixture.detectChanges();

    return fixture.debugElement.query(By.css(cssSelector));
  }

每当我使用

expect(true).toBe(true);

或

expect(debugElement.nativeElement).toBe(null);

或

expect(debugElement).not.toBeNull();

在TEST TWO中，无论何时使用

，测试都会正常工作或失败

expect(debugElement).toBeNull();

karma崩溃使用的浏览器（使用chrome / chromium / PhantomJs测试）并没有提供任何结果的线索。这不是一个简单的＆＃34;期望错误是真实的＆＃34;失败，测试环境完全崩溃。

您是否看到任何可以解释此行为的内容？

Answer 1

Angular的DebugElement是一个相当复杂的对象，Jasmine的expect似乎包含递归部分（或者至少是复杂到足以需要许多不同功能的算法）调用）...因此，不建议在单元测试中直接使用DebugElement。它通常以深度递归和浏览器内存泄漏结束。

在你的情况下，我会尝试：

let nl: NodeList = componentFixture.nativeElement.querySelectorAll('.events-compact-event');

expect(nl.length).toBeFalsy;

这样，您就不会使用DebugElement，并且您不会在测试中存在未定义值的风险（除了您需要未定义的值）。代码覆盖率和结果应该是等效的。

看一下这篇文章：https://medium.com/@martatatiana/poor-detective-angular2-browser-crash-and-debugelement-f0a651dbf33

Answer 2

使用expect(debugElement).toBeTruthy();代替expect(debugElement).not.toBeNull()，因为not.tobeNull()在未定义的情况下可能无法按预期运行。如果您的debugElement未定义，则可能会产生问题。

Answer 3

使用expect( Boolean(debugElement) ).toBeTruthy()代替

expect(debugElement).not.toBeNull()
或expect(debugElement).toBeTruthy()

Answer 4

这篇文章帮助了我：https://medium.com/@martatatiana/poor-detective-angular2-browser-crash-and-debugelement-f0a651dbf33。

建议使用webpack-dev-server --config webpack.conf.js --progress --profile --colors代替Angular fixture.nativeElement.querySelector。我认为我的问题与表格结合在一起。

Angular2 / Jasmine期望为null使浏览器崩溃

4 个答案: