Question

我的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();
  });

});

不确定丢失了什么，但是当我使用命令＆＃39; ng test＆＃39;

运行测试时，@ select语句没有被模拟并得到以下错误

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

Answer 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();
});

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

1 个答案: