@select ng-redux 的 Jamine 单元测试错误答案

【问题标题】：Jamine unit test error for @select ng-redux@select ng-redux 的 Jamine 单元测试错误
【发布时间】：2017-10-02 21:30:32
【问题描述】：

我的 component.ts 文件如下所示

import { Component, OnInit } from '@angular/core';
import { select } from 'ng2-redux';
import { Observable } from 'rxjs/Observable';
import { PersonalDetailsComponent } from '../personal-details/personal-details.component'

@Component({
  selector: 'app-profile-details',
  templateUrl: './profile-details.component.html'
})
export class ProfileDetailsComponent implements OnInit {

  @select(['customerData', 'personalDetails'])personalDetails:Observable<object>; //<------if i comment out @select statement, then the tests work 
  @select(['loading']) loading: Observable<boolean>;//<------if i comment out @select statement, then the tests work 

  constructor() { }

  ngOnInit() { }

}

我的茉莉花测试看起来像这样

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { NgRedux, select } from 'ng2-redux';
import { ProfileDetailsComponent } from './profile-details.component';
import { customerData } from '../data/customerProfileDataMock';
import { PersonalDetailsComponent } from '../personal-details/personal-details.component'
import { Router } from '@angular/router';
import { Observable } from 'rxjs/Observable';

class RouterStub { navigate(params) { } }
class MockSelect { }
class MockObservable<T> {}
class NgReduxStub {
  constructor() { }
  dispatch = () => undefined;
  getState = () => { return customerData; };
  subscribe = () => undefined;
}

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

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ProfileDetailsComponent, PersonalDetailsComponent],
      providers: [
        { provide: Router, useClass: RouterStub },
        { provide: select, useClass: MockSelect },
        { provide: NgRedux, useClass: NgReduxStub },
        { provide: Observable, useClass: MockObservable }
      ],
    })
      .compileComponents();
  }));

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

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

});

不确定缺少什么，但是当我使用命令“ng test”运行测试时，@select 语句没有被嘲笑并出现以下错误

TypeError: ng_redux_1.NgRedux.instance is undefined in src/test.ts

【问题讨论】：

标签： angular typescript jasmine mocking redux

【解决方案1】：

不确定你是否使用与我相同的包，但我注意到 npm (https://www.npmjs.com/package/ng2-redux) 上的 ng2-redux 链接到 github 存储库 https://github.com/angular-redux/store，所以也许有一些分支合并。

如果是这样，我建议对您的软件包进行更新。他们最近添加了 MockNgRedux，您可以将其添加到您的测试中

import { NgReduxTestingModule, MockNgRedux } from '@angular-redux/store/testing';

这是添加到 TestBed 中的

beforeEach(() => {
  TestBed.configureTestingModule({
    imports: [
      NgReduxTestingModule,
    ],

并且可以通过在特定选择器上设置值来测试使用@select()的组件

const stub = MockNgRedux.getSelectorStub(selector);
stub.next(values);
stub.complete();

请注意，方法是静态的，不需要 MockNgRedux 的实例。

确保在测试之间清除模拟存储

beforeEach(() => {
  MockNgRedux.reset();
});

【讨论】：