在 ngRx 中使用 Jest 测试 Observable<Pizza>

Question

我正在尝试创建从商店接收的 pizza$，然后显示该数据。

然后我将这个披萨数据放在一个网格上，一切看起来都不错。

完整代码

import { Store } from '@ngrx/store';
import { ProductesState } from '../shared/models/productesState.model';
import { Observable } from 'rxjs';
import { PizzaState } from '../shared/models/pizzaState.model';

@Component({
  selector: 'app-read',
  templateUrl: './read.component.html',
  styleUrls: ['./read.component.css']
})
export class ReadComponent {

  public pizzas$: Observable<PizzaState>;
  private readonly store;

  constructor(private readonly pizzaStore: Store<any>) { 
     this.store = pizzaStore;
     this.getPizzaData();
  }

  public getPizzaData() {
     this.pizzas$ = this.store.select('pizzas');  
  }

}

我将如何测试这个组件？我尝试了以下玩笑测试，但它失败并出现错误

this.store.select is not a function

测试代码

import { PizzaModel} from '../models/pizza-model';
import { createFakePizza } from '../test-utils/fake-pizza-helper';


    let entityAdapter: EntityAdapter<PizzaModel>;
    let initialEntityState: EntityState<PizzaModel>;    
    let store: any;
...

beforeAll(() => {
      entityAdapter = createEntityAdapter<PizzaModel>();
      initialEntityState = entityAdapter.getInitialState();
    });

describe('getAllPizzas' () => {

  it('should return all pizzas' () => {
   // Arrange
   const fakePizza = [createFakePizza(), createFakePizza()];
   const entityState = entityAdapter.addAll(fakePizza, intialEntityState);

   store = {
    entity: entityState.entities,
   };

  // Act
  const res = new ReadComponent(store);
  res.getPizzaData();


  //Assert
  expect(res.pizzas$).toEqual(fakePizza);

  }

}

我收到以下错误

TypeError: this.store.select is not a function

请帮忙。谢谢 =)

Answer 1

您需要将 select 功能添加到模拟商店。

import { of } from 'rxjs';
.....

store = {
  entity: entityState.entities,
  select: () => {
    return of([createFakePizza(), createFakePizza()]);
  },
};

你可以制作 select return 一些与 entities 相关的东西，但我会把它留给你。

在 ngRx 中使用 Jest 测试 Observable<Pizza>

Test Observable<Pizza> using Jest in ngRx

rxjs

typescript

jestjs

angular

angular-observable