Test a condition between the request and result of a HTTP request

Assume a component method that create a HTTP GET request, sets a loading state while waiting for a response, and removes the loading state when a response is given. For example:

getData() {
    this.myService
      .getSomeDate()
      .pipe(tap(_ => {
        this.loading = true;
      }))
      .subscribe(result => {
        this.data = result;
        this.loading = false;
      });
}

How would you verify with a test that the state between the request and response (eg. the pipe part) is indeed loading? I've tried to use the HttpTestingController to send a HttpEventType.Sent event but doesn't seems to work. Calling req.flush() will cause the code immediately to go to the subscribe part so that doens't work either. This is the test method I've used:

it('should have a loading state durin the request', () => {
    component.getData();
    const req = httpClient.expectOne('http://localhost:8080');
    req.event({type: HttpEventType.Sent});

    expect(component.loading).toBe(true);

    req.flush();
    expect(component.loading).toBe(false);
});