Cypress stub out loadStripe

I’m having some trouble stub’ing 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..

Source: Ask Javascript Questions

LEAVE A COMMENT