angular - 使用 Jest 的不可理解的单元测试效果错误
问题描述
我正在处理两个几乎相同的测试用例,我应该断言期望两个 NgRx 效果返回一个布尔值流。在第一个测试用例中一切都按预期工作,尽管对第二个测试用例做同样的事情,但我无法使其按预期工作。无论我做什么,收到的值始终是一个空数组:
expect(received).toEqual(expected) // deep equality
- Expected
+ Received
- Array [
- Object {
- "frame": 10,
- "notification": Notification {
- "error": undefined,
- "hasValue": true,
- "kind": "N",
- "value": true,
- },
- },
- ]
+ Array []
工作测试
logger.effects.spec.ts:
describe('LoggerEffects', () => {
let actions$: Observable<ApiFailure>;
let effects: LoggerEffects;
const serviceMock = <AppLoggerServiceI>{ failure: ({ body, title }) => of(true) };
beforeEach(() => {
TestBed.configureTestingModule({
imports: [StoreModule.forRoot({})],
providers: [
LoggerEffects,
provideMockActions(() => actions$),
{
provide: 'appLoggerService',
useValue: serviceMock
}
]
});
effects = TestBed.get(LoggerEffects);
});
const failure = new HttpErrorResponse({ error: 'HttpErrorResponse' });
describe('logApiFailure$', () => {
it('should return a stream of boolean if the dispatched action is ApiActions.searchFailure', () => {
const action = ApiActions.searchFailure({ failure });
actions$ = hot('-a--', { a: action });
const expected = cold('-b--', { b: true });
expect(effects.logApiFailure$).toBeObservable(expected);
});
});
});
logger.effects.ts:
logApiFailure$ = createEffect(
() =>
this.actions$.pipe(
ofType(ApiActions.searchFailure),
exhaustMap(({ failure: { body, title } }) =>
this.appLoggerService.failure({
body,
title
})
)
),
{ dispatch: false }
);
测试失败
router.effects.spec.ts:
describe('RouterEffects', () => {
let actions$: Observable<boolean>;
let effects: RouterEffects;
const routerMock = <Partial<Router>>{ navigate: (commands: any[]) => Promise.resolve(true) };
let router: Router;
beforeEach(() => {
TestBed.configureTestingModule({
imports: [StoreModule.forRoot({})],
providers: [
RouterEffects,
provideMockActions(() => actions$),
{
provide: Router,
useValue: routerMock
}
]
});
effects = TestBed.get(RouterEffects);
});
describe('navigateTo$', () => {
it('should return a stream of boolean if the dispatched action is RouterActions.navigateTo', () => {
const action = RouterActions.navigateTo();
actions$ = hot('-a--', { a: action });
const expected = cold('-b--', { b: true });
console.log('toto', effects.navigateTo$);
expect(effects.navigateTo$).toBeObservable(expected);
});
});
});
router.effects.ts:
navigateTo$ = createEffect(
() =>
this.actions$.pipe(
ofType(RouterActions.navigateTo),
exhaustMap(() => this.router.navigate(['my-route', {}]))
),
{ dispatch: false }
);
在这一点上,我假设 router.effects.spec.ts 中的 Hot Observable 有问题,这会阻止效果调度 navigateTo 操作。你对此有什么想法吗?
项目的依赖
{
"dependencies": {
"@angular/animations": "^8.0.0",
"@angular/cdk": "^8.0.0",
"@angular/common": "^8.0.0",
"@angular/compiler": "^8.0.0",
"@angular/core": "^8.0.0",
"@angular/forms": "^8.0.0",
"@angular/material": "^8.0.0",
"@angular/material-moment-adapter": "^8.0.0",
"@angular/platform-browser": "^8.0.0",
"@angular/platform-browser-dynamic": "^8.0.0",
"@angular/router": "^8.0.0",
"@ngrx/effects": "^8.0.0",
"@ngrx/router-store": "^8.0.0",
"@ngrx/store": "^8.0.0",
"core-js": "^2.5.4",
"hammerjs": "^2.0.8",
"moment": "^2.24.0",
"rxjs": "^6.5.0",
"tslib": "^1.9.0",
"zone.js": "^0.9.1"
},
"devDependencies": {
"jest-preset-angular": "7.0.0",
"@angular-devkit/build-angular": "^0.800.0",
"@angular-devkit/build-ng-packagr": "~0.800.0",
"@angular-devkit/core": "^8.0.2",
"@angular-devkit/schematics": "^8.0.2",
"@angular/cli": "8.0.0",
"@angular/compiler-cli": "^8.0.0",
"@angular/language-service": "^8.0.0",
"@ngrx/schematics": "^8.0.0",
"@ngrx/store-devtools": "^8.0.0",
"@nrwl/cypress": "8.1.0",
"@nrwl/jest": "8.1.0",
"@nrwl/workspace": "8.1.0",
"@nrwl/schematics": "8.1.0",
"@types/jest": "24.0.9",
"@types/node": "^12.0.7",
"codelyzer": "~5.0.1",
"cypress": "~3.3.1",
"dotenv": "6.2.0",
"jest": "24.1.0",
"ng-packagr": "^5.1.0",
"prettier": "1.16.4",
"ts-jest": "24.0.0",
"ts-node": "^8.2.0",
"tsickle": "^0.35.0",
"tslib": "^1.9.0",
"tslint": "~5.11.0",
"typescript": "~3.4.5"
}
}
解决方案
我只是花了一些时间来追踪一个类似的问题(空预期数组),结果证明这个问题与 TestScheduler 不管理的异步代码有关。就我而言,我使用的是from([Promise])
. 为了解决这个问题,我模拟了返回一个返回一个可观察对象的承诺的函数of()
。
这个问题对我帮助很大,并清楚地解释了问题: https ://github.com/cartant/rxjs-marbles/issues/11
在您的情况下,我认为问题是由this.router.navigate(['my-route', {}])
返回承诺而不是可观察的引起的。
尝试嘲笑router.navigate
返回of(true)
。
推荐阅读
- c# - ElasticSearch 数据的分组、计算和排序
- recursion - Sympy 中的递归类斐波那契函数
- c++ - 如何使用 while 循环找到 GCD?模运算符如何工作?
- r - 有没有办法自动将文件名设置为列名?
- python - 使用未知编码解码字符串形式的字节
- ios - 无法安装“cordova-plugin-firebase-authentication”:未定义
- flutter - 电子邮件启动器中的 NULL 值
- android - onNotificationOpened 适用于 Android 模拟器,但不适用于实际设备
- php - 如何获取具有两列的连续数组?
- css - 可变网格间隙使网格父级的填充侵入网格元素