从Jasmine-Karma迁移到Jest时,测试中的注入服务存在问题

时间:2019-01-22 18:55:52

标签: angular typescript dependency-injection jestjs karma-jasmine

我的测试在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问题,但是我不知道如何解决它。

0 个答案:

没有答案