Question

我们说我有一个非常简单的创造＆＃39;单元测试，ng cli为您生成的类型：

describe('MyComponent', () => {
  let component: MyComponent;
  let fixture: ComponentFixture<MyComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [MyComponent],
      imports: [
        HttpClientTestingModule,
        FormsModule,
        RouterTestingModule.withRoutes([{ path: 'home', redirectTo: '/' }])
      ],
      providers: [SomeService1, SomeService2, { provide: SomeService3, useValue: {} }],
      schemas: [NO_ERRORS_SCHEMA]
    })
      .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(MyComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

现在，当我像ng test --browser=Chrome那样运行此测试而不是查看Karma结果页面时，我正在查看我的组件。

我的CLI版本为1.6.3，Karma 1.7.1，Angular 5.2.0，OS macOS。

更新我的浏览器被捕获，业力加载，测试运行但是我看到了我的全屏组件，而不是业力结果，因为它的css覆盖了他们的结果。如果我找到div并在DOM中删除它，我可以看到Karma结果。

我只是希望Angular删除该节点。

Answer 1

我不太确定为什么在测试结束后仍保留该组件的DOM编译，但是我注意到它仅在上一次运行的测试中发生。如果您可以添加另一个也可以编译一个组件但不添加全屏组件的组件测试，则可以正确删除前一个组件。因此，简单地添加更多测试可能是最简单的解决方案。

但是，如果这还不够的话，这里有两种可能的解决方案：

1。不要编译

如果您的测试不涉及验证结果DOM，则可以直接使用该组件来简化测试的安排。

describe('MyComponent', () => {
  TestBed.configureTestingModule({
    // declarations: [MyComponent],
    imports: [
      HttpClientTestingModule,
      FormsModule,
      RouterTestingModule.withRoutes([{ path: 'home', redirectTo: '/' }]),
    ],
    // 1. Add the component as a provider.
    providers: [MyComponent, SomeService1, SomeService2, { provide: SomeService3, useValue: {} }],
    schemas: [NO_ERRORS_SCHEMA],
  });

  it('should do thing #1', () => {
    // 2. Test it like you would test a service.
    const comp = TestBed.get(MyComponent);
    expect(comp.value).toBe(false, 'off at first');
    comp.doThing1();
    expect(comp.value).toBe(true, 'on after click');
    comp.doThing1();
    expect(comp.value).toBe(false, 'off after second click');
  });

  it('should do thing #2', () => {
    const comp = TestBed.get(MyComponent);
    expect(comp.value2).toMatch(/is off/i, 'off at first');
    comp.doThing2();
    expect(comp.value2).toMatch(/is on/i, 'on after clicked');
  });
});

更多信息here。

2。从DOM中删除

如果您确实需要测试DOM，我发现的唯一解决方法是在完成测试后明确删除HTML元素。

  afterEach(() => {
    if (fixture.nativeElement && 'remove' in fixture.nativeElement) {
      (fixture.nativeElement as HTMLElement).remove();
    }
  });

Answer 2

而不是运行ng test尝试运行ng test --sourcemaps=false

这为我解决了同样的问题。

评论表明，这不是一个有效的州; Karma为我报告了以下内容，表明状态不佳（为了清楚起见，您可以在下次问题中包含此类信息）：

10% building modules...
No captured browser...
Chrome 63.0.3239 (Windows 10 0.0.0): Executed 0 of 14 DISCONNECTED (10.003 secs / 0 secs)...
Disconnected, because no message in 10000 ms.`

我实际上自己也无法看到这个问题 - 我一直认为我错误地写了测试。同事通过在Karma浏览器实例上打开Dev Tools（使用意外的渲染组件）正确识别了该问题。在那里，控制台报告了以下内容，我们进行了搜索，它引导我们得到答案：

Failed to load ng:///DynamicTestModule/AboutDsloCardComponent.ngfactory.js: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
(anonymous) @ zone.js:2956
zone.js:192 Uncaught DOMException: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'ng:///DynamicTestModule/AboutDsloCardComponent.ngfactory.js'.
    at http://localhost:9876/_karma_webpack_/webpack:/C:/Users/john.vandivier/workspace/halfaker/usa4-ui/ella-framework/node_modules/zone.js/dist/zone.js:2956:1

Ng5 Karma Jasmine测试渲染组件而不是结果页面

2 个答案:

1。不要编译

2。从DOM中删除