I am struggling to correctly stub out Stripe from my tests
CartCheckoutButton.ts
import React from 'react'
import { loadStripe } from '@stripe/stripe-js'
import useCart from '~/state/CartContext'
import styles from './CartCheckoutButton.module.scss'
const stripePromise = loadStripe(process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY)
const CartCheckoutButton = ({}: TCartCheckoutButtonProps) => {
const { cartItems } = useCart()
const handleCheckOutOnClick = async (event) => {
const { sessionId } = await fetch('/api/checkout/session', {
method: 'POST',
headers: {
'content-type': 'application/json',
},
body: JSON.stringify({ cartItems }),
}).then((res) => res.json())
const stripe = await stripePromise
const { error } = await stripe.redirectToCheckout({
sessionId,
})
if (error) {
// TODO: Show some error message
console.log(error)
}
}
return (
<div className={styles.container}>
<button onClick={handleCheckOutOnClick} disabled={cartItems.length == 0}>
CHECKOUT
</button>
</div>
)
}
export default CartCheckoutButton
EndUserExperience.spec.js
import * as stripeJS from '@stripe/stripe-js'
describe('End user experience', () => {
beforeEach(() => {
cy.visit('http://localhost:3000/')
cy.stub(stripeJS, 'loadStripe').resolves(
new Promise(function (resolve, reject) {
resolve({
redirectToCheckout({ sessionId }) {
console.log(`redirectToCheckout called with sessionId: ${sessionId}`)
return new Promise(function (resolve, reject) {
resolve({ error: true })
})
},
})
})
)
})
it('Orders some dishes and makes a checkout', () => {
console.log('working on it')
})
})
When I click around it still redirects me. So the stub did not seem to kick in..
Update II
Trying out the following solution suggested by @RichardMatsen
import React from 'react'
import * as stripeModule from '@stripe/stripe-js'
import useCart from '~/state/CartContext'
import styles from './CartCheckoutButton.module.scss'
const stripePublishableKey = process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY
const CartCheckoutButton = ({}: TCartCheckoutButtonProps) => {
const { cartItems } = useCart()
// https://stackoverflow.com/questions/67565714/cypress-stub-out-loadstripe
const stripePromise = React.useCallback(() => {
window['stripeModule'] = stripeModule
return stripeModule.loadStripe(stripePublishableKey)
}, [stripeModule, stripePublishableKey])
const handleCheckOutOnClick = async (event) => {
const { sessionId } = await fetch('/api/checkout/session', {
method: 'POST',
headers: {
'content-type': 'application/json',
},
body: JSON.stringify({ cartItems }),
}).then((res) => res.json())
const stripe = await stripePromise()
const { error } = await stripe.redirectToCheckout({
sessionId,
})
if (error) {
// TODO: Show some error message
console.log(error)
throw error
}
}
return (
<div className={styles.container}>
<button onClick={handleCheckOutOnClick} disabled={cartItems.length == 0}>
TILL KASSAN
</button>
</div>
)
}
export default CartCheckoutButton
test.spec.js
describe('End user experience', async () => {
beforeEach(() => {
cy.visit('http://localhost:3000/')
cy.window().then((win) => {
console.log(win)
cy.stub(win.stripeModule, 'loadStripe').resolves(
new Promise(function (resolve, reject) {
resolve({
redirectToCheckout({ sessionId }) {
console.log(`redirectToCheckout called with sessionId: ${sessionId}`)
return new Promise(function (resolve, reject) {
resolve({ error: true })
})
},
})
})
)
})
cy.intercept('GET', /.*stripe.*/, (req) => {
req.redirect('http://localhost:3000/checkout/success')
})
})
it('Orders some dishes and makes a checkout', () => {
console.log('working on it')
})
})
But it still redirect me and display an error
Trying to stub property 'loadStripe' of undefined