Cannot read property 'componentInstance' of undefined [ANGUALR/TEST]

So what i am trying to do is to test functions of my component.

The component :

    import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { ReservationService } from '../services/reservation.service';
import { Reservation } from '../models/reservation';

@Component({
    selector: 'app-reservation-detail',
    templateUrl: './reservation-detail.component.html',
    providers: [ReservationService]
})
export class ReservationDetailComponent implements OnInit {

  reservation: Reservation;
  errorMessage: string;
  title = 'titretest'; // Variable utilisable dans le template html du composant

  constructor(
    private reservationService: ReservationService,
    private route: ActivatedRoute
  ) { }

  ngOnInit() {
    this.getReservation();
  }

  getReservation() {
      const id = this.route.snapshot.paramMap.get('id');
      this.reservationService.getReservation(id)
          .subscribe(
          reservation => this.reservation = reservation,
          error => this.errorMessage = <any>error);
  }

  confirm() {
    this.reservationService.confirm(this.reservation.id)
        .subscribe(
        reservation => this.reservation = reservation,
        error => this.errorMessage = <any>error);
  }

  cancel() {
    this.reservationService.cancel(this.reservation.id)
        .subscribe(
        reservation => this.reservation = reservation,
        error => this.errorMessage = <any>error);
  }
}

So I created a spec.ts file to do some test and to see if my functions are working or not. Basically, I am testing the fact that when the cancel function is called, the status of the variable 'reservation' is set to cancelled. So I did this :

import { TestBed, async, ComponentFixture } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { ReservationDetailComponent } from './reservation-detail.component';
import { DebugElement, enableProdMode } from '@angular/core';
enableProdMode();

describe('ReservationDetailComponent', () => {
  let fixture: ComponentFixture<ReservationDetailComponent>;
  let debugElement: DebugElement;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [
        ReservationDetailComponent
      ],
    }).compileComponents();

    fixture = TestBed.createComponent(ReservationDetailComponent);
    debugElement = fixture.debugElement;
  }));

  it('Test cancel reservation', () => {
    fixture.componentInstance.cancel;
    expect(fixture.componentInstance.reservation.status==='cancelled');
  });
});

When i run ng test, Jasmine returns me an error :

TypeError: Cannot read property 'componentInstance' of undefined
at UserContext.<anonymous> (http://localhost:9876/src/app/reservation-detail/reservation-detail.component.spec.ts?:26:13)

Here is the template HTML of the component :

<div class="container">
    <div *ngIf="reservation">
      <nb-card>
        <nb-card-header>
          Reservation : 
        </nb-card-header>
        <nb-card-body>
          <div class="col s3 center-align">
              <p><b>Reservation :</b> from Liquid error: wrong number of arguments (3 for 2) to Liquid error: wrong number of arguments (3 for 2)</p>
              <p><b>Duration:</b>  minutes</p>
              <p><b>Created at:</b> Liquid error: wrong number of arguments (3 for 2)</p>
              <p><b>Facility:</b> </p>
              <p><b>Sport:</b> </p>
              <p><b>price:</b> </p>
          </div>
          <button nbButton status="success" [disabled]="reservation.status != 'awaitingValidation'" (click)="confirm()">Confirm</button>
          <button nbButton status="danger" [disabled]="reservation.status == 'cancelled' || reservation.status == 'failed'" (click)="cancel()">Cancel</button>
        </nb-card-body>
      </nb-card>
    </div>
</div>