Possible to test stripe.redirectToCheckout ?

[Norfeldt]

I had a little trouble getting cypress component testing working with NextJS, but now it works and I'm loving it.

There is still a lot to learn and right now I'm struggling a little with testing a CartCheckoutButton.tsx component

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
    }
  }

  return (
    <div className={styles.container}>
      <button onClick={handleCheckOutOnClick}>TILL KASSAN</button>
    </div>
  )
}

export default CartCheckoutButton

I can't seem to confirm that once it got a session it will redirect to the stripe checkout page

import React from 'react'
import { mount } from '@cypress/react'

import useCart, { CartProvider } from '~/state/CartContext'
import dishes from '~/pages/api/menu/data'
import GlobalStyle from '~/styles/GlobalStyle'

import CartCheckoutButton from '.'

describe('CartCheckoutButton', () => {
  const cartState: TCartItem[] = [
    {
      id: dishes[0].id,
      details: 'The usual',
      quantity: 1,
    },
    {
      id: dishes[1].id,
      details: 'Extra sauce',
      quantity: 2,
    },
  ]
  beforeEach(() => {
    mount(
      <>
        <GlobalStyle />

        <CartProvider state={cartState}>
          <CartCheckoutButton />
        </CartProvider>
      </>
    )
  })

  it('POST to the session end-point with the cart state', () => {
    cy.intercept({ method: 'POST', url: '/api/checkout/session', hostname: 'localhost' }, (req) => {
      expect(req.body.cartItems).to.deep.equal(cartState) // This test works just fine!
    })

    cy.get('button').click()
  })

  it('redirects to the stripe checkout', () => {
    cy.intercept(
      { method: 'GET', url: '/pay/*', hostname: 'https://checheckout.stripe.com' },
      (req) => {

        // TODO: expect the GET request to have been intercepted..
      }
    )

    cy.get('button').click()
  })
})

The first test works but the second never seems to perform a redirect. If I press the button manually then it does not redirect either...

[lmiller1990]

Good question! I am actually not sure about using cy.intercept on a full page redirect. I will find out and get back to you.

[Norfeldt]

I'm abandoning the redirect flow and implementing Stripe elements to both avoid the redirect and also make it simpler to attach order info.