reactjs - 如何在 React 测试中加载 Stripe？

Question

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

Error: Please load Stripe.js (https://js.stripe.com/v3/) on this page to use react-stripe-elements. If Stripe.js isn't available yet (it's loading asynchronously, or you're using server-side rendering), see 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')
  })

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

测试至少运行。