測試效果 NgRx Angular 11

Question

在我的 Angular 11 項目中嘗試測試效果時遇到問題。 我使用業力賽跑者。 似乎當我在測試中調度一個動作時，效果似乎沒有響應它。

 import { TestBed } from '@angular/core/testing'; import { of } from 'rxjs'; import { provideMockActions } from '@ngrx/effects/testing'; import { SimpleActionTypes, } from '../actions/simple.action'; import {SimpleEffects} from './simple.effect'; import {MockStore, provideMockStore} from '@ngrx/store/testing'; import {Store} from '@ngrx/store'; describe('SimpleEffects', () => { let actions$: any; let effects: SimpleEffects; let store: MockStore<Store>; beforeEach(() => { TestBed.configureTestingModule({ providers: [ SimpleEffects, provideMockActions(() => actions$), provideMockStore(), ], }); store = TestBed.inject(MockStore); effects = TestBed.inject(SimpleEffects); }); it('should be created', () => { expect(effects).toBeTruthy(); }); it('should fire with a default price', (done) => { // Mock the action that we use to activate the effect actions$ = of(SimpleActionTypes.UnavailablePrice); // Subscribe to the effect effects.getPriceAfterLocalCartUpdate.subscribe((res) => { // the expected results verification expect(res).toEqual(SimpleActionTypes.ComputePrice); // And all done; done(); }); }); });

我已經嘗試了很多方法來輸入我的效果的訂閱部分（使用大理石冷熱......），但它似乎不起作用。 我有一個失敗指示：

"SimpleEffects should fire with a default price FAILED
        Error: Timeout - Async function did not complete within 5000ms (set by jasmine.DEFAULT_TIMEOUT_INTERVAL)"

微項目托管在這里： https://github.com/Ushelajyan/simple-ngrx-testing-effects

預先感謝您的幫助。

Answer 1

您在測試中覆蓋actions$ （ it -block）。 不幸的是， TestBed.configureTestingModule()在beforeEach塊中執行，這發生在it塊執行之前。

import { TestBed } from '@angular/core/testing';
import { of } from 'rxjs';
import { provideMockActions } from '@ngrx/effects/testing';
import {
  SimpleActionTypes,
} from '../actions/simple.action';
import {SimpleEffects} from './simple.effect';
import {MockStore, provideMockStore} from '@ngrx/store/testing';
import {Store} from '@ngrx/store';

describe('SimpleEffects', () => {
  let store: MockStore<Store>;
  
  const createEffects = (actions$) => {
    TestBed.configureTestingModule({
      providers: [
        SimpleEffects,
        provideMockActions(() => actions$),
        provideMockStore() ,
      ],
    });
    store = TestBed.inject(MockStore);
    return TestBed.inject(SimpleEffects);
  };

  it('should be created', () => {
    const effects = createEffects(of(undefined));

    expect(effects).toBeTruthy();
  });

  it('should fire with a default price', (done) => {
    // Mock the action that we use to activate the effect
    const actions$ = of(SimpleActionTypes.UnavailablePrice);

    // Create the effect with your given mock
    const effects = createEffects(actions$)

    effects.getPriceAfterLocalCartUpdate.subscribe((res) => {
      // the expected results verification
      expect(res).toEqual(SimpleActionTypes.ComputePrice);
      // And all done !
      done();
    });
  });
});

這應該可以解決問題。 我添加了一個createEffect function ，它使用給定的actions$模擬正確配置您的TestBed並返回SimpleEffects的新實例。 然后可以使用此實例訂閱其定義的效果。