Testing Stripe with React Testing Library

Question

I've the following React components:

const PaymentModal = () => {
    
    const stripePromise = loadStripe(apiKey);
    
    return(
        <div className = 'Modal'>
            <Elements stripe = {stripePromise}>
                <CheckoutForm/>
            </Elements>
        </div>
    );
    
}

const CheckoutForm = () => {

    return(
        <CardElement options = {{hidePostalCode: true}}/>
    );

}

And the following test:

import React                                  from 'react';
import { render, fireEvent, screen, waitFor } from '@testing-library/react';
import PaymentModal                           from '../Components/PaymentModal';

test('PaymentModal -> Payment works in test mode', async () => {
    
    render(
          <PaymentModal/>
    );
    
    await screen.getByPlaceholderText('Número de tarjeta');
    
});

If I render the component without testing it, it renders the following:

<input placeholder = "Número de tarjeta">

The problem is that the test fails and I'm getting the following error:

TestingLibraryElementError: Unable to find an element with the placeholder text of: Número de tarjeta

Please, bear in mind that I don't want to mock-up the Stripe payment form. I want to test it by simulating a user introducing a dummy credit card number.

Answer 1

import React from 'react';
import { render, fireEvent, screen, waitFor } from '@testing-library/react';
import PaymentModal from '../Components/PaymentModal';

test('PaymentModal -> Payment works in test mode', async () => {
  render(<PaymentModal />);

  await waitFor(() =>
    expect(screen.getByPlaceholderText('Número de tarjeta')).toBeInTheDocument()
  );
});