gpt4 book ai didi

angular - 使用 { dispatch : false } 进行 NGRX 效果测试

转载 作者:行者123 更新时间:2023-12-04 12:42:19 24 4
gpt4 key购买 nike

我一直试图让这个工作几个小时。这是我转换为 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/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com