Unit Testing angular2 component with imported module

This is a real problem: you can mock everything but the imported component's selector.

There is an easy way. It allows to avoid importing the modules, instead you can just disable this kind of errors.

Just add this to your module:

import { NO_ERRORS_SCHEMA } from '@angular/core';

...

TestBed.configureTestingModule({
  schemas: [ NO_ERRORS_SCHEMA ],
  ...

Angular2 docs link

Yes, it won't help if you want to make integration (not isolated) tests, but it perfectly works for isolated ones.

Still even if you would decide to import a module I think it might be more correct to import the mock module with all implemented selectors instead.

When you use the TestBed.configureTestingModule, you're create a module from scratch for the test environment. So what ever you would need in the real application for the CellViewComponent to work, you also need to configure it in the testing module.

In your case, you're missing the Material card component. In the app you probably either imported the MaterialModule or the MdCardModule into your AppModule. So you need to do the same in the testing module

beforeEach(() => TestBed.configureTestingModule({
  imports: [ MaterialModule /* or MdCardModule */ ],
  declarations: [  CellViewComponent ],
  providers: [
    { provide: DataService, useValue: mockDataService },
    { provide: ActivatedRoute, useClass: MockActivatedRoute },
    { provide: Router, useValue: mockRouter },
  ]
}));