Tips for integrating Stripe into a React test

I am currently conducting a test on a React component that utilizes Stripe, and I am unsure about the best way to structure the test. An error message has been popping up as follows:

Error: In order to use react-stripe-elements, ensure that Stripe.js () is properly loaded on this page. If Stripe.js is not yet available (perhaps due to asynchronous loading or server-side rendering), refer to https://github.com/stripe/react-stripe-elements#advanced-integrations

The actual production code is quite straightforward:

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

Similarly, the test code is also relatively simple but is leading to an error. Interestingly, the error does not occur when accessing the app in the browser:

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

Answer №1

It appears that the solution to this query can be found in their advanced guide, particularly in the section where they implement the following:


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

As for my examination:


it('Should display 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')
})

Fortunately, the test is functioning as intended.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How to retrieve the value of the chosen item in a FlatList component using React Native

I am trying to store the item.cin of the selected item in data. Can someone provide assistance? I haven't been able to find a solution anywhere. Below is the code snippet: renderItem = ({ item }) => { return ( <View key={item. ...

reactjsrendernativeflatlist

Struggling to design a button that can delete tasks from the list, but encountering issues with the filter function

Although I am able to push values, I seem to be struggling with the filtering process. Can anyone provide guidance on whether I am using the filter method incorrectly or if there is another issue at play? import { useState } from 'react'; const ...

javascriptreactjs

Transforming global CSS into CSS modules: A step-by-step guide

In my nextjs project, I am utilizing react-bootstrap and bootstrap which requires me to include the global css: // _app.js import 'bootstrap/dist/css/bootstrap.min.css'; The issue arises when loading a significant amount of unused css on every p ...

cssreactjswebpackbootstrap-4next.js

Navigating back to the app after saving contacts can be achieved using React Native and the react-native-contacts library

I am currently utilizing the react-native-contacts library in my React Native application to save a contact. Prior to saving the contact, I request WRITE permission from Android. The process is successful; I open the contact form within my app and proce ...

javascriptandroidreactjsreact-native

Create a personalized TextField component in MUI with the ability to add reusable CSS classes for

My goal is to create a reusable component, but I encounter an error when I try to wrap this component into another wrapped component. I am specifically using SCSS classes and avoiding styled-components. Below is the non-reusable component: <Input ...

reactjsmaterial-ui

Using React, implement nested fetch calls to make multiple AJAX requests

Upon executing a function, it retrieves all zones in an environment and then proceeds to make an API call for the border points of each zone. While all fetches are successfully executed, there's a problem arise in the then block for the initial fetch ...

ajaxreactjsasynchronousgetfetch

Is there a way to compare data before and after revalidation using useSWR?

With the use of Next.js and through the implementation of useSWR, data is fetched from an endpoint every 30 seconds using an automatic revalidation interval (https://swr.vercel.app/docs/revalidation#revalidate-on-interval). Within the retrieved data, there ...

javascriptreactjsnext.jsswruse-swr

Display an array containing date objects in a dropdown menu for users to select from

I am working with an API call that returns an array of objects. Each object in the array contains a date or timestamp in ISO format. Right after my render() method, I have the following code snippet: const pickerItems = this.props.currentData.trips.map(t ...

javascriptreactjsreact-native

React Isomorphic, failing to render as a string due to the absence of a valid React Element

Struggling with setting up React for server-side rendering. Here are the files related to my issue: I've been following online tutorials and trying to create a React Component, but I'm confused about using react.createElement() on the component ...

node.jsexpressreactjs-fluxreactjs

I am continuously receiving the message "Alert: It is important for every child in a list to possess a distinct "key" prop." while working with the <option> list

Having trouble generating unique keys for my elements. I've tried different values and even Math.random() but still can't seem to get it right. I know the key should also be added to the outer element, but in this case, I'm not sure which on ...

reactjstypescript

When using express, the response.sendFile() function is causing an Uncaught SyntaxError with the error message: Unexpected token <

Currently, I'm utilizing react-router with browserHistory. There is a specific function in my code that is meant to send the Index.html file since the routing is handled client-side with react-router. However, there seems to be an issue where the serv ...

javascriptexpressreactjsreact-router

The library 'react-bootstrap' does not have a 'Grid' export available

I attempted to run npm start, but encountered the following error. ./src/App.js 104:16-24 'react-bootstrap' does not contain an export named 'Grid'. How can I resolve this issue? I already tried running npm install. Is there a substitu ...

reactjs

What is the best way to refresh a page after rotating the web page?

Struggling with a challenge in Next JS - can't seem to figure out how to automatically refresh the page when it rotates const app () => { useEffect(()=>{ window.addEventListener("orientationchange", function() { window.locati ...

javascriptreactjsnext.js

The console indicates that the state's arrays have been filled, yet I'm unable to retrieve the object[0]

In my code, the functions that populate the state are called on component will mount. When I log the state on the render, this is what I observe in the log. The log clearly shows that the arrays in the state have been populated, although there seems to be ...

javascriptreactjsstaterender

Error: rails-ujs has already been initialized and running

I'm in the early stages of developing a Rails application that incorporates React on the front-end, but I'm struggling to load my test/setup component. I'm unsure of the root cause of this issue or how to go about resolving it. After search ...

ruby-on-railsreactjs

It seems that the `to` required prop was missing in the `Link` component of React-Router

Currently, I am facing an issue while trying to integrate react-router. The error message I'm encountering is: Failed propType: Required prop to was not specified in Link. Check the render method of app. Unfortunately, I am unable to pinpoint ex ...

javascriptreactjsreact-router

Sending data to a React Dialog component using the OnClick event

I am a beginner learning React.js and currently experimenting with passing parameters to a dialog box using onclick events. <IconButton className={classes.approvebutton} onClick={() => handleDialogClick("approve",1)}> <ThumbU ...

javascriptreactjsdialogmaterial-ui

What is the best way to utilize useEffect solely when the length of an array has

Is there a way to trigger a state update only when the length of the prop "columns" changes? useEffect(() => { if (columns.length !== prevColumns.length) { // update state } }, [columns]); Any suggestions on how to achieve this? ...

javascriptreactjsreact-hooks

Tips for importing an external JavaScript file and accessing its data within a ReactJS project?

Currently, I am working on a React project using create-react-app. My objective is to load an external JavaScript file (hosted in IIS) and utilize the data it contains. To fetch this file, I am including a script in my index.html like so: <script type ...

javascriptreactjs

ERRSOLVE : Dependency resolution failed due to unresolved dependencies

npm ERROR! code ERESOLVE npm ERROR! ERESOLVE unable to resolve dependency tree npm ERROR! npm ERROR! While resolving: [email protected] npm ERROR! Found: [email protected] npm ERROR! node_modules/react npm ERROR! react@"^18.2.0" from ...

reactjsmaterial-uiweb-development-server