赛普拉斯存根 loadStripe

Question

我在从测试中删除 Stripe 时遇到了一些问题

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

当我点击它时，它仍然会重定向我。所以存根似乎并没有发挥作用..

更新二

尝试@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()

  // 
  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')
  })
})

但它仍然重定向我并显示错误

Trying to stub property 'loadStripe' of undefined

Answer 1

据我所知，您不能通过在测试中导入它的模块来在应用程序中存根方法，看起来您得到了一个不同的“实例”。

请查看最近的这个问题，一种有效的方法是通过 window 传递要存根的实例。

CartCheckoutButton.ts

import React, { useCallback } from 'react'
import * as stripeModule from '@stripe/stripe-js';

if (process.browser) {                  // this check needed for NextJS SSR
  if (window.Cypress) {
    window.stripeModule = stripeModule;
  }
}

// const stripePromise = loadStripe(...)  // need to defer this call
                                          // from load time to runtime
                                          // see useCallback below

// Maybe put this outside the React function, 
// since dependencies shouldn't have property references
const stripeKey = process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY;



const CartCheckoutButton = ({}: TCartCheckoutButtonProps) => {

   const stripePromise = useCallback(() => {
     return stripeModule.loadStripe(stripeKey);
   }, [stripeModule, stripeKey]);

EndUserExperience.spec.js

beforeEach(() => {

  cy.visit('http://localhost:3000/')
    .then(win => {                      // wait for app to initialize

      const stripeModule = win.stripeModule;
      cy.stub(stripeModule, 'loadStripe').resolves(...

    })

可重现的例子

构建默认的 Next 应用程序

npx create-next-app nextjs-blog --use-npm --example "https://github.com/vercel/next-learn-starter/tree/master/learn-starter"

将 stripeModule 引用和 useCallback() 添加到 /pages/index.js

import React, { useCallback } from 'react'
import * as stripeModule from '@stripe/stripe-js';

import Head from 'next/head'

if (process.browser) {
  if (window.Cypress) {
    window.stripeModule = stripeModule; 
  }
}

const stripeKey = process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY;

export default function Home() {

  const stripePromise = useCallback(() => {
    return stripeModule.loadStripe(stripeKey);
  }, [stripeModule, stripeKey]);

  return (
    <div className="container">
    ...

添加基本测试

it('stubs loadStripe', () => {

  cy.visit('http://localhost:3000/').then(win => {
    const stripeModule = win.stripeModule;
    cy.stub(stripeModule, 'loadStripe').resolves(
      console.log('Hello from stubbed loadStripe')
    )
  })
})

构建、开始、测试

yarn build
yarn start
yarn cypress open

来自 cy.stub() 的消息被打印到控制台。

赛普拉斯存根 loadStripe

Cypress stub out loadStripe

javascript

stripe-payments

typescript

cypress

更新二

可重现的例子