Question: **pay.service.ts**

```
  @ViewChild('cardElementForm', { static: false }) cardElementForm: ElementRef;
  stripe = Stripe(environment.stripe.pubKey);

  async createStripeForm() {
    const stripeElements = this.stripe.elements();
    const cardElement = stripeElements.create('card');
    cardElement.mount(this.cardElementForm.nativeElement);
  }

```

Edit: added more code. This is my service that im importing into my page.ts 

**page.html**

```
 <form #saveCard="ngForm" class="saveCardForm">
              <ion-item>
                <div id="cardElementForm" #cardElementForm></div>
                <ion-text *ngIf="error">{{ error }}</ion-text>
              </ion-item>
              <ion-item>
                <ion-text (click)="this.payments.createStripeForm()">Create form</ion-text>
              </ion-item>
              <ion-item>
                <ion-text (click)="this.payments.saveCard()">Send data</ion-text>
              </ion-item>
            </form>

```

**page.ts**

```
import { Pay } from '../services/pay.service';

```

I get error:

```
TypeError: this.cardElementForm is undefined

```

Wheres the problem? Im stuck at this.

Answer: 
In my case I saw some errors in terminal when I run ng test but when browser open it shown no specs found.

ERROR IN PROJECT

[![enter image description here](https://i.stack.imgur.com/Eqti9.png)](https://i.stack.imgur.com/Eqti9.png)

this was the error. After fixed the above error it showed all the specs with the result of executed test cases
I had the same issue but in my case I upgraded from angular 9 to angular 10 and tests stopped running, I was getting a lot of:

```
src/app/xxxxx/basic-info/basic-info.component.spec.ts:391:9 - error TS2532: Object is possibly 'undefined'.

391 this.whatToDelete = ["mumbo", "jumbo"];

```

So in the 'describe' I changed the arrow function to a regular function because an arrow function does not have it's own 'this'

\*

> 
> Unlike regular functions, arrow functions do not have their own this .
> The value of this inside an arrow function remains the same throughout
> the lifecycle of the function and is always bound to the value of this
> in the closest non-arrow parent function.
> 
> 
> 

* 

Hope this can help one of you and save you some time