How to mock GooglePay in Cypress

Question

I followed the GooglePay implementation instructions here: https://developers.google.com/pay/api/web/guides/tutorial

Now I'm trying to test out the functionality via Cypress for my website and I'm getting an error

ReferenceError: google is not defined at googlePayClient

I am using Vue 3 and creating my client that I'm trying to mock in the store like so:

googlePayClient(_, getters) {
 return new google.payments.api.PaymentsClient({environment});
},

I am importing google in index.html like so:

<script async
 src="https://pay.google.com/gp/p/js/pay.js"
></script>

• user21022731: Please show where you import google.
• Sarah: Ah, my bad! I added it to the question

Answer 1

Mocks should be created in the test not the app, since you do not want to mock when a real user is accessing the app.

The <script> to load the google module places it as a global variable on the window object, so your test should do something like this:

cy.window().then((win) => { // "win" is the app window object
 const google = win.google; // get the instance of google loaded via script
 // now make your mock...
 return new google.payments.api.PaymentsClient({environment})