Angular13TestBed不注入攔截器

我有一個帶有自定義 HTTP 客戶端和攔截器的 Angular 13 應用程式，我想對其進行單元測驗。

base-url.interceptor.ts：

import { Inject, Injectable } from '@angular/core';
import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor } from '@angular/common/http';
import { Observable } from 'rxjs';

export const BASE_API_URL = 'BASE_API_URL';

@Injectable()
export class BaseUrlInterceptor implements HttpInterceptor {
  constructor(@Inject(BASE_API_URL) private baseUrl: string) {}

  intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
    const apiRequest = request.clone({ url: `${this.baseUrl}${request.url}` });
    return next.handle(apiRequest);
  }
}

base-url.interceptor.spec.ts：

import { TestBed } from '@angular/core/testing';
import { ApiHttpService, API_HTTP_INTERCEPTORS } from '../api-http.service';
import { BaseUrlInterceptor, BASE_API_URL } from './base-url.interceptor';

describe('BaseUrlInterceptor', () => {
  let interceptor: BaseUrlInterceptor;

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [],
      providers: [
        ApiHttpService,
        { provide: BASE_API_URL, value: 'http://example.com' },
        { provide: API_HTTP_INTERCEPTORS, useClass: BaseUrlInterceptor, multi: true }
      ]
    });
    interceptor = TestBed.inject(BaseUrlInterceptor);
  });

  it('should be created', () => {
    expect(interceptor).toBeTruthy();
  });
});

不幸的是TestBed.inject(BaseUrlInterceptor)未能注入攔截器的實體。interceptor總是undefined。如果我通過手動創建實體來解決這個問題，new BaseUrlInterceptor('http://example.com');它可以作業，但是其他攔截器有更多的依賴關系，我想在這里使用 Angulars 依賴注入。

如何配置 TestBed，以便它可以成功創建一個實體BaseUrlInterceptor？

我創建了一個重現問題的最小 CodeSandbox：

此外，當我運行錯誤測驗時，我收到此錯誤訊息：

Chrome Headless 98.0.4758.102 (Linux x86_64) BaseUrlInterceptor should be created FAILED
        Error: NG0204: unreachable
        error properties: Object({ code: 204 })
        Error: NG0204: unreachable
            at injectableDefOrInjectorDefFactory (node_modules/@angular/core/fesm2015/core.mjs:11494:1)
            at providerToFactory (node_modules/@angular/core/fesm2015/core.mjs:11556:1)
            at providerToRecord (node_modules/@angular/core/fesm2015/core.mjs:11521:1)
            at R3Injector.processProvider (node_modules/@angular/core/fesm2015/core.mjs:11424:1)
            at node_modules/@angular/core/fesm2015/core.mjs:11410:1
            at node_modules/@angular/core/fesm2015/core.mjs:4162:1
            at Array.forEach (<anonymous>)
            at deepForEach (node_modules/@angular/core/fesm2015/core.mjs:4162:1)
            at R3Injector.processInjectorType (node_modules/@angular/core/fesm2015/core.mjs:11410:1)
            at node_modules/@angular/core/fesm2015/core.mjs:11213:1
        Error: Expected undefined to be truthy.
            at <Jasmine>
            at UserContext.<anonymous> (projects/frontend/src/app/core/http/interceptors/base-url.interceptor.spec.ts:21:25)
            at ZoneDelegate.invoke (node_modules/zone.js/fesm2015/zone.js:372:1)
            at ProxyZoneSpec.onInvoke (node_modules/zone.js/fesm2015/zone-testing.js:287:1)
Chrome Headless 98.0.4758.102 (Linux x86_64): Executed 1 of 1 (1 FAILED) (0.072 secs / 0.056 secs)
TOTAL: 1 FAILED, 0 SUCCESS

uj5u.com熱心網友回復：

你得到了，Error: NG0204: unreachable因為當你為你定義提供者時，BASE_API_URL你正在使用一個屬性value，而它應該是useValue.

{ provide: BASE_API_URL, useValue: 'http://example.com' },

無論如何，即使你解決了這個問題，你也會得到一個NullInjectorError，因為你沒有定義一個使用BaseUrlInterceptor類作為 InjectionToken 的提供者。您正在使用該類作為API_HTTP_INTERCEPTORS令牌的提供者之一。

在對攔截器進行單元測驗的背景關系中，您應該擺脫 ApiHttpService，而只關注攔截器類。

你有兩個選擇：

手動實體化類

beforeEach(() => {
    interceptor = new BaseUrlInterceptor('http://example.com');
});

或者在 Testbed 中使用攔截器類作為提供者

beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [],
      providers: [
        { provide: BASE_API_URL, useValue: 'http://example.com' },
        BaseUrlInterceptor,
      ],
    });
    interceptor = TestBed.inject(BaseUrlInterceptor);
  });

干杯

標籤：有角度的 打字稿 角度测试 角13

上一篇：Angular檔案上傳驗證器失敗

下一篇：在Angular中構建動態FormBuilder