我的测试在Jasmine-Karma中工作正常,但由于我注入服务的方式存在问题,在Jest中失败。
accessrequest.service.ts
import { Injectable } from "@angular/core";
import { Observable } from "rxjs";
import { map } from 'rxjs/operators';
import { Store } from "@ngrx/store";
import { AppStore } from "../../../core/store/app.store";
import { CWPUrlConstants } from '../../../core/constants/urls';
import { AccessRequest } from "../datamodels/accessrequest";
import {
SetAccessRequestsAction,
} from "../actions/accessrequests.actions";
import { DataService } from "./data.service";
@Injectable()
export class AccessRequestService {
private static hasBeenInitialized = false;
constructor(private dataService: DataService, private store: Store<AppStore>) {
}
refreshAllRequests(): void {
this.dataService.get(CWPUrlConstants.ACCESS_REQUESTS).pipe(
map(payload => new SetAccessRequestsAction(payload)))
.subscribe(
action => this.store.dispatch(action)
);
}
getRequests(): Observable<Array<AccessRequest>> {
if (!AccessRequestService.hasBeenInitialized) {
this.refreshAllRequests();
AccessRequestService.hasBeenInitialized = true;
}
return this.store.select(store => store.cwp_reducer.accessRequests);
}
}
accessrequest.service.spec.ts
import { EMPTY, of as observableOf, Observable } from 'rxjs';
import { inject, TestBed } from "@angular/core/testing";
import { Store } from "@ngrx/store";
import { AccessRequest } from "../datamodels/accessrequest";
import { AccessRequestService } from "./accessrequest.service";
import { AccessRequestsActions } from "../actions/accessrequests.actions";
import { DataService } from "./data.service";
class MockStore {
private requests: AccessRequest[] | string;
select<T>(key: string): Observable<{}> {
if (key === "accessRequests" && this.requests) {
return observableOf(this.requests);
} else {
return observableOf({} as AccessRequest);
}
}
dispatch(action: AccessRequestsActions): void {
this.requests = action.payload;
}
}
class MockDataService {
post(): void {
// mock
}
get() {
return EMPTY;
}
}
describe('Access request Service Tests', () => {
beforeEach(() =>
TestBed.configureTestingModule({
providers: [
AccessRequestService,
{provide: Store, useClass: MockStore},
{provide: DataService, useClass: MockDataService}
]
})
);
it('should get accessRequests from store', inject([AccessRequestService], (accessRequestService) => {
let accessRequest = accessRequestService.getRequests();
expect(accessRequest).toBeDefined();
}));
jest.config.js
module.exports = {
preset: 'ts-jest',
testEnvironment: 'node',
testMatch: ['**/+(*.)+(spec|test).+(ts|js)?(x)'],
transform: {
'^.+\\.(ts|js|html)$': 'jest-preset-angular/preprocessor.js'
},
moduleFileExtensions: ['ts', 'js', 'html'],
collectCoverage: true,
coverageReporters: ['html'],
snapshotSerializers: [
'jest-preset-angular/AngularSnapshotSerializer.js',
'jest-preset-angular/HTMLCommentSerializer.js'
],
verbose: true,
};
运行测试时,以上结果导致错误TypeError: Cannot read property 'getComponentFromError' of null
。我发现我需要添加以下内容来解决该问题:
accessrequest.service.spec.ts
import { BrowserDynamicTestingModule,
platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';
...
describe(... {
beforeEach(() => {
TestBed.resetTestEnvironment();
TestBed.initTestEnvironment(BrowserDynamicTestingModule,
platformBrowserDynamicTesting());
});
...});
但是现在抛出的错误是Can't resolve all parameters for AccessRequestService: (?, ?)
,我理解这是一个DI问题,但是我不知道如何解决它。