角度 2 测试 - 无法创建组件

Question

我的应用程序有很多模块，其中包含许多组件和服务以及其他 Angular2 的东西。

现在我正在尝试使用 TestBed 方法来创建一个带有 jasmine + karma 的单元测试。

我在展示概念证明时遇到了一个错误。 我为我的一个组件创建了一个测试，如下所示：

let myCompServiceStub = {} as MyComponentService;
let routerStub = {} as Router;
let globalServiceStub  = {} as MyGlobalService;

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

    beforeEach(async(() => {
        TestBed
            .configureTestingModule({
                imports: [MyModule],
                providers: [
                    { provide: MyComponentService, useValue: myCompServiceStub },
                    { provide: Router, useValue: routerStub },
                    { provide: MyGlobalService, useValue: globalServiceStub }
                ]
            })
            .compileComponents()
            .then(() => {
                fixture = TestBed.createComponent(MyComponent);
                // component = fixture.componentInstance;
            });
    }));


    it('test it', () => {
        expect(true).toBe(true);
    });
});

MyModule 有许多其他模块的导入（其中大部分是我的，但也有来自 Angular 和 Materialize 的 CommonModule, MaterializeModule, FormsModule 模块），它们定义了一些全局组件。它在提供程序中也有一个MyComponentService。 导入的自定义模块没有提供服务。

AppComponent中提供的MyGlobalService是主要组件。

当我尝试运行测试时，出现错误：

PhantomJS 2.1.1 (Windows 8 0.0.0) MyComponent test it FAILED
        invokeTask@karma-shim.js:8833:41
        onInvokeTask@karma-shim.js:10715:50
        invokeTask@karma-shim.js:8832:53
        runTask@karma-shim.js:8709:58
        drainMicroTaskQueue@karma-shim.js:8976:43
        run@karma-shim.js:4098:31
        karma-shim.js:4111:33
        flush@karma-shim.js:4466:13
        resolvePromise@karma-shim.js:9045:79
        karma-shim.js:9081:32

我真的坚持下去了，没有好主意我做错了什么？

我的测试依赖项如下所示：

"@angular/common": "~2.3.0",
"@angular/compiler": "~2.3.0",
"@angular/compiler-cli": "^2.3.1",
"@angular/core": "~2.3.0",
"@angular/forms": "~2.3.0",
"@angular/http": "~2.3.0",
"@angular/platform-browser": "~2.3.0",
"@angular/platform-browser-dynamic": "~2.3.0",
"@angular/platform-server": "^2.3.1",
"@angular/router": "~3.3.0",
"angular2-materialize": "6.3.0",
"karma": "1.1.2",
"karma-chrome-launcher": "^1.0.1",
"karma-coverage": "^1.0.0",
"karma-jasmine": "^1.0.2",
"karma-phantomjs-launcher": "^1.0.0",
"karma-remap-istanbul": "0.1.1",
"karma-sourcemap-loader": "^0.3.7",
"karma-webpack": "1.7.0",
"@types/jasmine": "^2.5.36",
"jasmine-core": "^2.3.4",
"jasmine-spec-reporter": "^2.4.0",

Answer 1

确保您确实通过

导入了您的组件（看不到您是否这样做）

import { MyComponent } from './MyComponent.component';
import { FormsModule }   from '@angular/forms';

还在你的 TestBed.configureTestingModule 中将你的组件设置为声明

    TestBed.configureTestingModule({
      declarations: [ MyComponent ],
      imports:[FormsModule ],
      providers:[]
    })
    .compileComponents()
  }));

附言我还在我的所有测试组件上导入 FormsModule。

Answer 2

  let fixture: ComponentFixture<MyComponent>;

和

  fixture = TestBed.createComponent(ListPRDComponent);

MyComponent != ListPRDComponent

尝试：

   fixture = TestBed.createComponent(MyComponent);