角度单元测试错误：模块“DynamicTestModule”导入的意外值“ObservableMedia”答案

【问题标题】：Angular unit test error: Unexpected value 'ObservableMedia' imported by the module 'DynamicTestModule'角度单元测试错误：模块“DynamicTestModule”导入的意外值“ObservableMedia”
【发布时间】：2017-12-11 19:18:30
【问题描述】：

我有一个相当简单的单元测试文件，如下所示：

import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { Http, HttpModule } from '@angular/http';
import { MockBackend } from '@angular/http/testing';
import { MaterialModule } from '@angular/material';
import { MediaChange, ObservableMedia } from "@angular/flex-layout";
import { PageHeaderComponent } from './page-header.component';
import { UserService } from '../user.service';
import { PreloadService } from '../preload.service';

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

    beforeEach(() => {
        TestBed.configureTestingModule({
            declarations: [PageHeaderComponent],
            providers: [
                {
                    provide: Http,
                    deps: [MockBackend]
                },
                PreloadService,
                UserService
            ],
            imports: [MaterialModule, ObservableMedia],
            schemas: [CUSTOM_ELEMENTS_SCHEMA]
        });

        fixture = TestBed.createComponent(PageHeaderComponent);
        component = fixture.componentInstance;
    });

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

它正在测试一个普通的 Angular CLI 组件，该组件包含一个订阅以观察断点的元素可见性：

constructor(public media: ObservableMedia) {
    // watch for changes in breakpoint
    media.asObservable()
        .subscribe((change: MediaChange) => {
            // update the header tooltip state
            if (change.mqAlias == 'xs') {
                this.showHeaderTooltip = false;
            }
            else {
                this.showHeaderTooltip = true;
            }
        });
}

ngOnInit() {
    // check breakpoint and set header tooltip state
    if (this.media.isActive('xs')) {
        this.showHeaderTooltip = false;
    } else {
        this.showHeaderTooltip = true;
    }
}

它会抛出这个错误：

错误：模块“DynamicTestModule”导入了意外值“ObservableMedia”。请添加 @NgModule 注释。在http://localhost:9876/_karma_webpack_/polyfills.bundle.js（第 6972 行） ZoneAwareError@http://localhost:9876/_karma_webpack_/polyfills.bundle.js:6972:28 语法错误@http://localhost:9876/_karma_webpack_/vendor.bundle.js:14803:39 http://localhost:9876/_karma_webpack_/vendor.bundle.js:28487:55 forEach@[本机代码]
....

我在研究中看到过类似的错误报告，但ObservableMedia 没有。我尝试将导入添加到 app.module.ts，但这没有效果。缺少什么？

【问题讨论】：

如果您的子目录中有其他 node_modules，这可能是原因，例如在本地共享项目中您可能使用了 yarn 链接。这是由于版本不匹配，运行时与 tscongif moduleResolution 和较新的 Node 和 Angular-cli 安装组合之间的关系混淆。长话短说，如果有的话，删除多余的 node_modules
@UlugToprak，感谢您的建议。我之前确实刷新了 node_modules。
刷新是指你再次运行 npm install 吗？因为那不会解决问题。我猜你最近更改了 Angular 或 Node 版本。如果你不这样做，我会让我自己出去
我删除了 node_modules 目录并运行安装，只有一个目录。我不使用纱线。在整个项目期间，Angular 一直在 4.2.3 上。节点在某个时候已更新，但似乎与此问题无关。再次感谢。

标签： angular unit-testing

【解决方案1】：

我认为您应该使用FlexLayoutModule 而不是ObservableMedia，因为ObservableMedia 只是基本抽象类，而您需要导入角度模块，即用@NgModule 装饰器装饰的类

Docs

【讨论】：

谢谢。奇怪的是组件本身需要{ MediaChange, ObservableMedia }，但在测试文件中不起作用。