Search code examples
angularjasmineobservablengrx-store

Jasmine it('should create') fails with Component should create FAILED TypeError: Cannot read property 'next' of undefined

my component gets data from store 

@Component({
  selector: 'iomt-user',
  templateUrl: './user.component.html',
  styleUrls: ['./user.component.scss']
})
export class UserComponent implements OnInit {

  users: Observable<User[]>;

  constructor(readonly store: Store<AppState>) { 
    this.users = this.store.pipe(select(getUsers))
  }

  ngOnInit(): void {
    this.store.dispatch(new LoadUsers());
  }

}

and test looks like this

describe('UserComponent', () => {
  let component: UserComponent;
  let fixture: ComponentFixture<UserComponent>;
  const initialState = { loggedIn: false };

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [UserComponent, UserTableComponent],
      imports: [MaterialModule, FormsModule, RouterTestingModule, UserDomainModule,
        HttpClientTestingModule, ReactiveFormsModule, BrowserAnimationsModule, StoreModule.forRoot(userReducer)],
      providers: [
          provideMockStore({initialState}),
      ]
    }).compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(UserComponent);
    component = fixture.componentInstance;
    component.users = component.store.pipe(select(getUsers));
    fixture.detectChanges();
  });

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

testing output gives me 

Chrome 77.0.3865 (Windows 10.0.0) UserComponent should create FAILED
        TypeError: Cannot read property 'next' of undefined
            at <Jasmine>
            at Function.continuer (http://localhost:9876/_karma_webpack_/node_modules/q/q.js:1278:1)
            at UserContext.<anonymous> (http://localhost:9876/_karma_webpack_/node_modules/q/q.js:1305:1)
            at ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/node_modules/zone.js/dist/zone-evergreen.js:359:1)
            at ProxyZoneSpec.push../node_modules/zone.js/dist/zone-testing.js.ProxyZoneSpec.onInvoke (http://localhost:9876/_karma_webpack_/node_modules/zone.js/dist/zone-testing.js:308:1)
            at ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/node_modules/zone.js/dist/zone-evergreen.js:358:1)
            at Zone.run (http://localhost:9876/_karma_webpack_/node_modules/zone.js/dist/zone-evergreen.js:124:1)
            at runInTestZone (http://localhost:9876/_karma_webpack_/node_modules/zone.js/dist/zone-testing.js:561:1)
            at UserContext.<anonymous> (http://localhost:9876/_karma_webpack_/node_modules/zone.js/dist/zone-testing.js:576:1)
            at <Jasmine>
Chrome 77.0.3865 (Windows 10.0.0): Executed 20 of 31 (1 FAILED) (0 secs / 5.334 secs)
Chrome 77.0.3865 (Windows 10.0.0) UserComponent should create FAILED
        TypeError: Cannot read property 'next' of undefined
            at <Jasmine>
            at Function.continuer (http://localhost:9876/_karma_webpack_/node_modules/q/q.js:1278:1)
            at UserContext.<anonymous> (http://localhost:9876/_karma_webpack_/node_modules/q/q.js:1305:1)
            at ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/node_modules/zone.js/dist/zone-evergreen.js:359:1)
            at ProxyZoneSpec.push../node_modules/zone.js/dist/zone-testing.js.ProxyZoneSpec.onInvoke (http://localhost:9876/_karma_webpack_/node_modules/zone.js/dist/zone-testing.js:308:1)
            at ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/node_modules/zone.js/dist/zone-evergreen.js:358:1)
            at Zone.run (http://localhost:9876/_karma_webpack_/node_modules/zone.js/dist/zone-evergreen.js:124:1)
            at runInTestZone (http://localhost:9876/_karma_webpack_/node_modules/zone.js/dist/zone-testing.js:561:1)
            at UserContext.<anonymous> (http://localhost:9876/_karma_webpack_/node_modules/zone.js/dist/zone-testing.js:576:ne1)

If I remove 'expect(component).toBeTruthy();' the should create part fails anyway. What kind of a process does it do in there that 'next' is used? And how can I locate what is the called on?

I am new to testing and to store so that just does not make much sense to me. I appreciate any help.

Solution

  • It was caused because of a wrong import of async. I changed import { async } from "q"; to import { async } from "@angular/core/testing";