How to unit test an API that depends on an external library "<script src="http://stripe[...]"

Question

I am trying to unit test an API call to ensure that it has been called with the correct properties. This API call depends on Stripe's external library that is attached to the window via index.html src="http://stripe[...]". I get window.[...] is not a function.

I successfully mocked the $http.post request, but in the successful callback from Stripes payment, it redirects the user back by calling window.Stripe().redirectToCheckout(). I managed to mock window.Stripebut had difficulty with .redirectToCheckout() and was unsure of the correct way to go about it.

index.html:

<script src="https://js.stripe.com/v3/"></script>
<link rel="preconnect" href="https://q.stripe.com">
<link rel="preconnect" href="https://checkout.stripe.com">

StripePayment.vue

async stripe () {
await this.$http.post(process.env.VUE_APP_PAYMENTAPI + 'api/session/', {
        amount: this.cost,
      }).then(response => {
        // Redirect to the main page by using the sessionId provided by stripes response.
        window.Stripe(process.env.VUE_APP_STRIPE_KEY).redirectToCheckout({
          sessionId: response.body
        })
      }, response => {
        this.paymentFailed(response)
      })
}

StripePayment.spec.js

let stripeSpy = sinon.spy(StripePayment.methods, 'stripe')
sinon.assert.calledOnce(stripeSpy)

I expect to be able to check that the API call has been called successfully. Unfortunately, I get the following error message - "UnhandledPromiseRejectionWarning: TypeError: window. Stripe is not a function". If I stub window. Stripe, then I get a similar error with .redirectToCheckout() and it was at this point where I struggled to stub.

There is some similar code to mine that has been posted that can be located here - https://repl.it/@AndrewReinlieb/Checkout-Test.

Answer 1

For proper isolated unit testing, all units that don't belong to tested unit should be mocked. In case a unit belongs to external library, it should be mocked on window:

const stripeMock = sinon.stub(window, 'stripe');
const redirectToCheckoutMock = sinon.stub();
stripeMock.returns({ redirectToCheckout: redirectToCheckoutMock });