gpt4 book ai didi

javascript - Cypress stub out loadStripe

转载 作者:行者123 更新时间:2023-12-03 22:59:04 31 4
gpt4 key购买 nike

我在从测试中剔除 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')
})
})

当我点击它时,它仍然会重定向我。所以 stub 似乎没有启动..
更新二
尝试@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')
})
})

但它仍然重定向我并显示错误
Trying to stub property 'loadStripe' of undefined

最佳答案

据我所知,你不能通过在测试中导入它的模块来 stub 应用程序中的方法,看起来你得到了一个不同的“实例”。
请参阅这个最近的问题 How to Stub a module in Cypress ,一种可行的方法是通过 window 传递要 stub 的实例.
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() 的消息打印到控制台。

关于javascript - Cypress stub out loadStripe,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/67565714/

31 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com