如何在React测试中加载Stripe？

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>

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

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

- Victor Pudeyev

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

测试至少可以运行。

- Victor Pudeyev