我一直试图让这个工作几个小时。这是我转换为 Jest 而不是 Karma 的第一个项目,到目前为止一切顺利。尽管如此,我还是为我的效果编写了一些测试,无论出于何种原因,我完全无法以我期望的方式测试它们。
我试图测试的效果是一个非常简单的导航:
@Effect({ dispatch: false })
go$ = this.actions$.pipe(
ofType(RouterActions.GO),
tap(
({ payload: { path, query: queryParams, extras } }: RouterActions.Go) => {
this.router.navigate(path, { queryParams, ...extras });
}
)
);
我已经注入(inject)了一个假路由器,并打算测试它是否正在调用导航,该测试经历了多次迭代试图让它工作,但我目前拥有的是:
describe('Router Effects', () => {
let actions$: Observable<any>;
let router: TestRouter;
let effects: RouterEffects;
beforeEach(() => {
TestBed.configureTestingModule({
providers: [
RouterEffects,
provideMockActions(() => actions$),
{
provide: Router,
useFactory: getRouter
}
]
});
actions$ = TestBed.get(Actions);
router = TestBed.get(Router);
effects = TestBed.get(RouterEffects);
});
describe('go$', () => {
test('should call router.navigate with the correct path', done => {
const action = new fromActions.Go({ path: ['some', 'path'] });
actions$ = hot('-a', { a: action });
const expected = cold('-b', { b: action });
effects.go$.subscribe(
result => {
console.log('inside subscribe?');
expect(router.navigate).toHaveBeenCalled();
console.log('after expect');
done();
console.log('after done?');
},
done,
done
);
expect(effects.go$).toBeObservable(expected);
});
});
});
当我运行该测试时,我在终端中得到以下结果:
FAIL src/app/store/effects/router.effects.spec.ts (5.832s)
● Console
console.log src/app/store/effects/router.effects.spec.ts:48
inside subscribe?
console.log src/app/store/effects/router.effects.spec.ts:50
after expect
console.log src/app/store/effects/router.effects.spec.ts:52
after done?
● Router Effects › go$ › should call router.navigate with the correct path
Timeout - Async callback was not invoked within the 5000ms timeout specified by jest.setTimeout.
我一直在努力弄清楚为什么没有调用异步回调?我在这里复制了一个最小的仓库:https://github.com/BenAychh/example-ngrx-effects-jest有问题的代码位于此文件夹中 https://github.com/BenAychh/example-ngrx-effects-jest/tree/master/src/app/store/effects .如果有人有兴趣在这里帮助我,您应该能够克隆整个 repo 并运行它并(希望)看到我所看到的。
最佳答案
鉴于此效果:
@Injectable()
export class AuthEffects {
@Effect({ dispatch: false })
public logoutSuccess$ = this.actions$.pipe(
ofType(AuthActionTypes.LogoutSuccess),
tap(() => this.localStorage.removeItem(AUTH_FEATURE_KEY)),
tap(() => this.router.navigate(['/']))
);
}
这是我测试
dispatch: false
的方法影响:describe('logoutSuccess$', () => {
it('should navigate and remove related data from local storage', () => {
const action = new LogoutSuccess;
actions$ = cold('-a', { a: action });
expect(effects.logoutSuccess$).toBeObservable(actions$);
expect(localStorageService.removeItem).toHaveBeenCalledWith(AUTH_FEATURE_KEY);
expect(router.navigate).toHaveBeenCalledWith(['/']);
});
});
.toBeObservable(actions$)
做的伎俩。基于 this answer .
关于angular - 使用 { dispatch : false } 进行 NGRX 效果测试,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53358677/