Unexpected value 'StateService' declared by the module 'DynamicTestModule'

Question

I'm using UI Router in an Angular 5 project. When running the test for the footer component I'm getting this error:

Failed: Unexpected value 'StateService' declared by the module 'DynamicTestModule'. Please add a @Pipe/@Directive/@Component annotation.

However, I'm importing StateService and I'm including it in my declarations array in the TestBed.

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { FooterComponent } from './footer.component';
import { StateService } from '@uirouter/angular';

fdescribe('FooterComponent', () => {
  let component: FooterComponent;
  let fixture: ComponentFixture<FooterComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [ StateService ],
      declarations: [ FooterComponent ],
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(FooterComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

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

Any idea where I'm going wrong?

Answer 1

The declarations array is only for declarable classes: Components, Directives and Pipes. Add the StateService to the providers array like this:

TestBed.configureTestingModule({
  imports: [],
  declarations: [ FooterComponent ],
  providers: [StateService]
})