title: How do I test a JSONP HTTP request in Angular?
body: <p>I'm using the <a href="https://angular.io/api/common/http/HttpClientModule" rel="nofollow noreferrer">HttpClientModule</a> and <a href="https://angular.io/api/common/http/HttpClientJsonpModule" rel="nofollow noreferrer">HttpClientJsonpModule</a> to make a JSONP HTTP request in a service.</p>
  
  <p><strong>app.module.ts</strong></p>
  
  <pre><code>import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  import { HttpClientModule, HttpClientJsonpModule } from '@angular/common/http';
  
  import { AppComponent } from './app.component';
  
  @NgModule({
    declarations: [
      AppComponent
    ],
    imports: [
      BrowserModule,
      HttpClientModule,
      HttpClientJsonpModule
    ],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  
  <p>This service uses the <a href="https://angular.io/api/common/http/HttpClient#jsonp" rel="nofollow noreferrer">jsonp</a> method from the <a href="https://angular.io/api/common/http/HttpClient" rel="nofollow noreferrer">HttpClient class</a> to get a JSONP response from the specified URL. I think that this response is intercepted by <a href="https://angular.io/api/common/http/JsonpInterceptor" rel="nofollow noreferrer">JsonpInterceptor</a> and sent to the <a href="https://angular.io/api/common/http/JsonpClientBackend" rel="nofollow noreferrer">JsonpClientBackend</a> where the request is handled.</p>
  
  <p><strong>example.service.ts</strong></p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { HttpClient } from '@angular/common/http';
  
  @Injectable()
  export class ExampleService {
    url = "https://archive.org/index.php?output=json&amp;callback=callback";
  
    constructor(private http: HttpClient) { }
  
    getData() {
      return this.http.jsonp(this.url, 'callback');
    }
  }
  </code></pre>
  
  <p>Using the <a href="https://angular.io/api/common/http/testing/HttpClientTestingModule" rel="nofollow noreferrer">HttpClientTestingModule</a>, I inject the <a href="https://angular.io/api/common/http/testing/HttpTestingController" rel="nofollow noreferrer">HttpTestingController</a> so I can mock and flush my JSONP HTTP request.</p>
  
  <p><strong>example.service.spec.ts</strong></p>
  
  <pre><code>import { TestBed, inject } from '@angular/core/testing';
  import { 
    HttpClientTestingModule,
    HttpTestingController
  } from '@angular/common/http/testing';
  
  import { ExampleService } from './example.service';
  
  describe('ExampleService', () =&gt; {
    let service: ExampleService;
    let httpMock: HttpTestingController;
  
    beforeEach(() =&gt; {
      TestBed.configureTestingModule({
        imports: [HttpClientTestingModule],
        providers: [ExampleService]
      });
  
      service = TestBed.get(ExampleService);
      httpMock = TestBed.get(HttpTestingController);
    });
  
    describe('#getData', () =&gt; {
      it('should return an Observable&lt;any&gt;', () =&gt; {
        const dummyData = { id: 1 };
  
        service.getData().subscribe(data =&gt; {
          expect(data).toEqual(dummyData);
        });
  
        const req = httpMock.expectOne(service.url); // Error
        expect(req.request.method).toBe('JSONP');
        req.flush(dummyData);
      });
    });
  });
  </code></pre>
  
  <p>In the end, I get the error</p>
  
  <p><code>Error: Expected one matching request for criteria "Match URL: https://archive.org/index.php?output=json&amp;callback=callback", found none.</code></p>
  
  <p>If I change the request method to GET, this test works as expected.</p>
  
  <p>From what I can tell, the HttpClientTestingModule uses the HttpClientTestingBackend but there is no JsonpClientTestingBackend or corresponding interceptor.</p>
  
  <p>How do I test a JSONP HTTP request in Angular?</p>