- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我在从测试中剔除 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 似乎没有启动..
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(...
})
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/
我有以下 Spring 代码要使用 Spock 进行测试: @Service @RequiredArgsConstructor public class MyService { private f
package main import ( "fmt" "github.com/hyperledger/fabric/core/chaincode/shim" pb "gith
我刚开始使用Wiremock,但对 stub 有疑问。 从文档看来,您似乎可以在映射下使用JSON文件,也可以在Java代码中使用代码stubFor(get(urlEqualTo(...。但是,我发现
我有以下要测试的对象: public class MyObject { @Inject Downloader downloader; public List readFi
我看到它被使用过很多次,但从未真正停下来质疑过它。现在我想知道 stub 和 stub 之间是否有区别! 有吗?还是历史原因? stub !意思是它 stub 一次?并返回到正常的方法调用? 最佳答案
在 Jasmine 中,如何创建一个纯 stub ,其中所有方法都已 stub 并返回未定义? 最佳答案 我认为没有任何现成的东西可以做到这一点,但您可以创建自己的。 describe('Stub a
两个类。父级:B。子级:A。A.method1() 覆盖 B 的。 public class B { protected boolean method1(){...}; } public cl
我有一个函数依赖于另一个函数,而不是测试依赖性我只想测试该依赖函数的特定结果。但是,当我对函数进行 stub 时,什么也没有发生,返回结果就好像我一开始就没有对函数进行 stub 一样。 示例代码:
这是要测试的代码: const AWS = require('aws-sdk'); const { APPLICATIONS, NOTIFICATION_FREQUENCIES } = req
背景 Any client socket program(C) over TCP/IP looks like, /* Socket creation */ sockfd = socket(AF_I
我正在尝试使用 stub 提供程序(我从 this 问题的答案中得到)和 stub 验证器来实现一个简单的同步适配器。对于身份验证,我使用了基本的 sync adapter example由谷歌提供。
与在测试点使用模拟框架(如 Rhino Mocks)相比,是否存在手动创建 stub 类型更有利的情况。 我们在项目中采用了这两种方法。当我查看一长串对象的 stub 版本时,我的直觉是它会增加维护开
我想 stub doSomething 来回调错误。但是,我只希望它在第一次响应时回调并出现错误。我想在第一次调用后恢复 stub 为了 stub 第一个调用,我可以这样做: var stub = s
我有一个 TimeMachine 类,它为我提供当前日期/时间值。该类看起来像这样: public class TimeMachine { public virtual DateTime Ge
如果我有一个 Rhino Mock 对象,它已经像这样声明了一个 stub 调用: mockEmploymentService.Stub(x => x.GetEmployment(999)).Retu
通常使用 Mockito,如果你 stub 一个被多次调用的方法,你会这样做 Mockito .doReturn(0) .doReturn(1) .doReturn(2)
逻辑 public class Logic { String date = (LocalDateTime.now()).format(DateTimeFormatter.ofPattern("yyyy
我想达到的目的 At the time of compilation, the compiler knew the function call was valid because you includ
这可能是一个简单的问题,但我无法缩短它。 我正在测试我的一个类,ClassToTest。在生产中,它将对第三方库对象(ThirdPartyClass 的实例)执行操作。 我想用 stub 模拟那个类。
我是 js 单元测试的新手,对使用 withArgs 进行 stub 有疑问。 我有一些名为“create”的通用外部函数,我只想为某种参数和原始“create”的其他返回值 stub 它。例如: s
我是一名优秀的程序员,十分优秀!