angular 2 testing - Can't create a component

Question

My app has lots of modules with many components and services and other Angular2 stuff.

Now I'm trying to use TestBed approach to create a unit tests with jasmine + karma.

I've faced an error during revealing proof of concept. I've created a test for one of my components, which looks like this:

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 has a bunch of imports of other modules (most of them mine, but there are also CommonModule, MaterializeModule, FormsModule modules form Angular and Materialize), that define some global components. It also has a MyComponentService in providers. The imported custom modules has no provided services.

MyGlobalService provided in AppComponent, which is main component.

When I try to run the tests, I get an error:

PhantomJS 2.1.1 (Windows 8 0.0.0) MyComponent test it FAILED
        [email protected]:8833:41
        [email protected]:10715:50
        [email protected]:8832:53
        [email protected]:8709:58
        [email protected]:8976:43
        [email protected]:4098:31
        karma-shim.js:4111:33
        [email protected]:4466:13
        [email protected]:9045:79
        karma-shim.js:9081:32

And I'm really stuck on it, have no good ideas what am I doing wrong?

My tests dependencies looks like:

"@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",

Bean0341 · Accepted Answer · 2017-01-05 22:22:20Z

2

Make sure you actually import your component (cant see if you did or not) via

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

Also in you TestBed.configureTestingModule set your component as a declaration

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

p.s. I also import FormsModule on all my test components as well.

answered Jan 5, 2017 at 22:22

Bean0341

1,6972 gold badges19 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

remborg Over a year ago

I just had a similar issue, importing the FormsModule and HttpClientTestingModule fixed it for me

YairTawil · Accepted Answer · 2017-01-05 21:27:03Z

0

  let fixture: ComponentFixture<MyComponent>;

and

  fixture = TestBed.createComponent(ListPRDComponent);

MyComponent != ListPRDComponent

try:

   fixture = TestBed.createComponent(MyComponent);

answered Jan 5, 2017 at 21:27

YairTawil

4,1111 gold badge25 silver badges20 bronze badges

1 Comment

a.kozlenkov Over a year ago

Oops, that was a typo in question just in order to hide some secret data :)

Collectives™ on Stack Overflow

angular 2 testing - Can't create a component

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related