Guidance on how to test CardElement interaction

[nicholeuf]

What happened?

We are trying to do the same thing as https://github.com/stripe/react-stripe-js/issues/214:

I am trying to add tests where a user enters credit card numbers. Do you have any examples of this? We are using Jest + React Testing Library.

In the example below, the onChangeFromStripe function is modifying internal state to flag when the user has completed interaction with the CardElement. We are mocking stripe using the https://github.com/stripe/react-stripe-js/blob/master/test/mocks.js as inspiration. However, we are having trouble mocking the CardElement interaction.

<Label htmlFor={cardHtmlId}>
            Card Details
            <CardElement
                id={cardHtmlId}
                options={{ ...baseStripeStyles, hidePostalCode: true }}
                onChange={onChangeFromStripe}
              />
</Label>

Can you provide any examples on how best to test this scenario or provide helpers for mocking stripe element components?

Environment

No response

Reproduction

No response