To see this working, head to your live site.

How to load Stripe in a React test?

I'm testing a React component that uses Stripe, and I'm wondering how to structure the test? I see this error:

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

The production code is pretty basic:

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

the test code is basic as well, but results in an error. The error doesn't occur when I just access the app in the 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')
  })

1 comment

Answers (1)

AnswerDeveloper

Jan 05

To fix the error you are seeing, you can mock the Stripe library by creating a mock function for the StripeProvider component, then importing this function in your test file instead of the actual StripeProvider component. This will allow your test to run without trying to load the actual Stripe library.

Here is an example of how you can create the mock function:


const mockStripeProvider = ({ children }) => {
  return <div>{children}</div>;
};

export default mockStripeProvider;

Then, in your test file, you can import the mock function like this:


import mockStripeProvider from 'path/to/mockStripeProvider';

Finally, you can update your test code to use the mock function like this:


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

This should allow your test to run without trying to load the actual Stripe library, and allow you to test your component without interference from the Stripe library.