我将如何在规范测试中模拟 ngOnInit() 中的路由 queryParams

问题描述

失败:无法读取 null 的属性queryParams"在

Failed: Cannot read property 'queryParams' of nullat

我假设这是因为我在 ngOnInit() 中有以下内容:

I'm assuming it's because I have the following in ngOnInit():

  ngOnInit() {
    this.route.queryParams.subscribe(async params => {
      this.userInfo = await JSON.parse(params['user_info']);
    });

到目前为止，我已经尝试使用以下内容构建我的单元测试:

So far I've tried constructing my unit test with the following:

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

  beforeEach(async(() => {
    routeStub = null;

    TestBed.configureTestingModule({
      declarations: [ AddItineraryPage ],
      imports: [IonicModule.forRoot(), FormsModule, ReactiveFormsModule, RouterTestingModule],
      providers: [
        {provide: ActivatedRoute, useValue: routeStub}
      ]
    }).compileComponents();

    fixture = TestBed.createComponent(AddItineraryPage);
    component = fixture.componentInstance;
    fixture.detectChanges();
  }));

  it('should create', () => {
    routeStub.queryParams = {
    displayName: '',
    dateOfBirth: '',
    email: '',
    photos: [],
    location: '',
    bio: '',
    intDestination: [],
    userId: ''};

    fixture.detectChanges();
    fixture.whenStable().then(() => {
      expect(component).toBeTruthy();

    });
  });
});

推荐答案

因此，当 routeStub 对象上的 queryParams 属性被调用时，它为空.您将 routeStub 初始化为 null，所以这是有道理的.ngOnInit() 在你第一次调用 fixture.detectChanges() 时被调用，所以你需要在 routeStub 之前分配一些东西你打这个电话.

So when the property queryParams is being called on the routeStub object, it is null. You initialized the routeStub to null, so it makes sense. ngOnInit() gets called the first time you call fixture.detectChanges(), so you need to assign something to the routeStub before you make that call.

同样在您的代码中，您在 queryParams 上调用 subscribe()，因此您需要为该属性分配一个类似 Observable 的对象.您可以通过使用 Observable.of() 来使用实际的 Observable.

Also in your code, you call subscribe() on the queryParams, so you will need to assign an Observable-like object to the property. You can just use an actual Observable by using Observable.of().

所以你的测试代码应该看起来更像

So your test code should look more like

beforeEach(async(() => {
  routeStub = null;
  ...
  fixture = TestBed.createComponent(AddItineraryPage);
  component = fixture.componentInstance;
  // remove fixture.detectChanges() as it calls ngOnInit()
}));

it('should create', () => {
  routeStub = {
    queryParams: of({
      user_info: '{
        "displayName": "UserName"
      }'
      // not sure why you are calling `JSON.parse()`
      // but if you are doing that, then user_info should
      // be a JSON string
    })
  };

  fixture.detectChanges();
  fixture.whenStable().then(() => {
    expect(component.userInfo.displayName).toBe('UserName');
  });
});

这篇关于我将如何在规范测试中模拟 ngOnInit() 中的路由 queryParams的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！