Question

我是NGXS的新手，在测试期间，我在所有测试用例中都遇到了错误。我正在从商店获取数据： app.component.ts

    somedata: Idetail
    this.someData = this.store.selectSnapshot(State.details).
    this.data = this.someData.DATA;

但是在每个测试用例中我都会遇到错误：

TypeError：无法读取null的属性“ DATA”

Answer 1

您必须模拟商店以在测试中使用它。

例如：

beforeEach(async(() => {
   TestBed.configureTestingModule({
      declarations: [MyComponent]
      imports: [NgxsModule.forRoot([])] // import real module without state
   });

   const store:Store = TestBed.get(Store);
   spyOn(store, 'select').and.returnValue(of(null)); // be sure to mock the implementation here
   spyOn(store, 'selectSnapshot').and.returnValue(null); // same here
}));

Answer 2

如果要将数据从存储中获取到进行单元测试的组件中，请执行以下操作：

在TestBed.configureTesdtingModule中，将NgxsModule.forRoot（[StateName]）
确保组件具有正确的选择器设置以获取数据
在您的单元测试用例中，获得Store实例：const store: Store = TestBed.get(Store);
从测试案例store.dispatch(new AddToDo(toDo));
检查组件上的响应

有关更多信息，请访问文档https://www.ngxs.io/recipes/unit-testing，我发现4星期前开始使用NGXS时真的很有帮助：）

Answer 3

如果您可以提供更多的代码和/或堆栈炸弹，那么我想您会找到更多的帮助。

Answer 4

这似乎是一个奇怪的话题，但希望我能给出一些有关使用Angular组件进行NGXS单元测试的提示：

导入NgxsModule.forRoot([StateName1, StateName2, ...])，然后在TestBed.configureTestingModule providers 下添加StateName1（和StateName2，...）中的每个构造函数注入（确保您已经为每次注入使用适当的模拟对象），这真的重要。

这是我的例子：

TestBed.configureTestingModule({
      declarations: [MyComponent]
      imports: [NgxsModule.forRoot([NAME_OF_YOUR_TESTING_STATE])]
   });

和

await TestBed.compileComponents().then(async () => {
      fixture = TestBed.createComponent(NAME_OF_YOUR_TESTING_COMPONENT);
      component = fixture.componentInstance;
      fixture.detectChanges();

      store = TestBed.get(Store);
      store.reset(NAME_OF_YOUR_TESTING_STATE);
      actions$ = TestBed.get(Actions);
});

您应该预先定义 store 和 actions $ 对象

let store: Store;
let actions$: Observable<any>;

毕竟，如果调度了ButtonChange动作并且isButtonChanged已更新，则可以测试以下内容：

public changeButton(value: string): void {
       this.store.dispatch(new ButtonChange(value));
       this.isButtonChanged = true;
}

我可以简单地通过以下方式实现它：

it('should segmentButtonChanged', () => {
        let actionDispatched = false;
        zip(actions$.pipe(ofActionDispatched(ChangeButton))).subscribe(() => (actionDispatched = true));

        const mockedString = 'hello there';
        component.changeButton(mockedString);

        expect(actionDispatched).toBeTruthy();
        expect(component.isButtonChanged).toBeTruthy();
});

如何在角度分量中测试NGXS？

4 个答案: