如何在 React 测试中加载 Stripe？

Posted 2023-03-21

【中文标题】如何在 React 测试中加载 Stripe？

【英文标题】：How to load Stripe in a React test?

【发布时间】：2018-08-18 10:35:29

【问题描述】：

我正在测试一个使用 Stripe 的 React 组件，我想知道如何构建测试？我看到这个错误：

错误：请在此页面上加载 Stripe.js (https://js.stripe.com/v3/) 以使用 react-stripe-elements。如果 Stripe.js 尚不可用（它正在异步加载，或者您正在使用服务器端渲染），请参阅 https://github.com/stripe/react-stripe-elements#advanced-integrations

生产代码非常基本：

<StripeProvider apiKey=config.stripeKey>
    <MyCheckout />
</StripeProvider>

测试代码也是基本的，但会导致错误。当我在浏览器中访问应用程序时不会出现错误：

  it('Should render the correct element', () => 
    let rendered = ReactTestUtils.renderIntoDocument(
      <Provider store=store>
        <Account />
      </Provider>)
    let elem = ReactDOM.findDOMNode(rendered)
    expect(elem.tagName.toLowerCase()).to.equal('div')
  )

【参考方案1】：

看起来他们的高级指南回答了这个问题，他们这样做的部分是：

  componentDidMount () 
    if (window.Stripe) 
      this.setState(stripe: window.Stripe(config.stripeKey)) // eslint-disable-line new-cap
     else 
      document.querySelector('#stripe-js').addEventListener('load', () => 
        this.setState(stripe: window.Stripe(config.stripeKey)) // eslint-disable-line new-cap
      )
    
  

在我的测试中：

  it('Should render the correct element', () => 
    window.Stripe = function () 
    let rendered = ReactTestUtils.renderIntoDocument(
      <Provider store=store>
        <CartPage />
      </Provider>)
    let elem = ReactDOM.findDOMNode(rendered)
    expect(elem.tagName.toLowerCase()).to.equal('div')
  )

测试至少运行。