angular - 在 Angular/Karma 中模拟 DOCUMENT

Question

你如何在 Angular 中模拟 DOCUMENT(HTMLDocument 的影子表示)？实现是在构造函数中使用这个:

@Inject(DOCUMENT) private document: Document

看完这个 How to inject Document in Angular 2 service我已将其放入我的 .spec 设置中:

const lazyPath = 'dummy';
const pathname = `/${lazyPath}`;
const document = { location: { pathname } as Location } as Document;
beforeEachProviders(() => ([ {provide: DOCUMENT, useValue: document} ]));

但这给了我错误:

ERROR in ./src/app/main/components/app-lazy/app-lazy.component.spec.ts
Module not found: Error: Can't resolve '@angular/core/testing/src/testing_internal' in '...'
resolve '@angular/core/testing/src/testing_internal' in '....'
  Parsed request is a module
  using description file: .../package.json (relative path: ...)
    Field 'browser' doesn't contain a valid alias configuration
    resolve as module

当我使用简单的提供者:TestBed.configureTestingModule 中的 [] 而不是 testing_internal 包中的 beforeEachProviders 时，组件未定义，例如未正确初始化。当我从注入(inject)的文档切换到窗口对象(我无法设置/模拟位置)时，它仅在单元测试中初始化(在非测试执行中都有效)。我能做些什么？

Answer 1

将此作为答案发布，因为格式在评论中不起作用。

如果可能的话，你能分享一个stackblitz吗？当我需要注入(inject)模拟时，我通常将其设置为:

  // ... beginning of file

  const mockDocument = { location: { pathname } };

  beforeEach(() => TestBed.configureTestingModule({
    imports: [...],
    // Provide DOCUMENT Mock 
    providers: [
      { provide: DOCUMENT, useValue: mockDocument }
    ]
  }));

  // ...rest of file