Unit testing Angular2/Jasmine预期为空，导致浏览器崩溃

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

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();
        });
    });
});

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

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

或

或

在测试2中，测试正常工作或失败，但每当我使用

expect(debugElement).toBeNull();

karma crash使用的浏览器（使用chrome/chrome/PhantomJs进行了测试），没有给出发生什么的任何线索。这不是一个简单的“expect false to be true”失败，测试上下文完全崩溃

---

您看到任何可以解释这种行为的东西了吗？使用

expect（debugElement）.toBeTruthy（）

而不是

expect（debugElement）.not.toBeNull（）

，因为

not.toBeNull（）

在未定义某些内容时可能不会按预期的方式运行。如果

debugElement

未定义，则可能会产生问题

Angular的

DebugElement

是一个相当复杂的对象，而Jasmine的

expect

似乎包含递归部分（或者至少是复杂到需要许多不同函数调用的算法）。。。因此，不建议在单元测试中直接使用

DebugElement

。它通常以深度递归和浏览器内存泄漏结束

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

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

expect(nl.length).toBeFalsy;

这样，您就不用使用DebugElement，也不会有在测试中有未定义值的风险（除了那些您确实需要未定义的值）。代码覆盖率和结果应该相等

看看这篇文章：

使用

expect（Boolean（debugElement））.toBeTruthy（）

而不是

• expect（debugElement）.not.toBeNull（）

• 或者

  expect（debugElement）.toBeTruthy（）

这篇文章帮助了我：

---

它建议使用

fixture.nativeElement.querySelector

代替Angular的

debugElement

。我想我的问题与表单有关。
但是你知道如果定义了debugElement，它怎么会崩溃吗？因为如果带有DebuggElement的元素被破坏，我至少会看到一个错误日志或其他东西，而不是浏览器崩溃。经过更多的测试后，truthy/falsy从未出现过这个问题。但我仍然不确定这如何会使整个测试套件崩溃。感谢Rom的建议，大约一周前，我才看到这篇文章。但是不能正确使用DebugElement很烦人，这个功能在我看来相当不错。我会尝试一下你的解决方案，看看它是否能提供更好的结果。这是一种修复方法，但我觉得有点不舒服。自从那篇文章发表后，我在测试中所做的只是不直接在调试元素上测试，而是在debugElement.nativeElement这样的子属性上测试，我所有的问题都消失了：）答案中已经包含了链接和内容

expect(debugElement).not.toBeNull();

expect(debugElement).toBeNull();

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

expect(nl.length).toBeFalsy;