Question

我正在测试使用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>

测试代码也是基本的，但会导致错误。当我刚刚访问broswer中的应用程序时，错误不会发生：

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

测试至少运行。

如何在React测试中加载Stripe？

1 个答案: