Using the builder pattern to mount Vue component wrappers

PaymentWithCard.spec.factory.js

import { shallowMount } from '@vue/test-utils'
import PaymentWithCard from '@/components/PaymentWithCard.vue'

export default function() {
  let amountInEuros = 100
  let cardNumber = null,
    cardHolder = null,
    expirationDate = null
  let successMsgSpy = jest.fn()
  let errorMsgSpy = jest.fn()

  const builder = {
    with: {
      amountInEuros(amount) {
        amountInEuros = amount
        return builder
      },

      cardInfo(number, holder, expiration) {
        cardNumber = number
        cardHolder = holder
        expirationDate = expiration
        return builder
      }
    },

    spy: {
      successMsg(spy) {
        successMsgSpy = spy
        return builder
      },

      errorMsg(spy) {
        errorMsgSpy = spy
        return builder
      }
    },

    build() {
      return shallowMount(PaymentWithCard, {
        propsData: { amountInEuros, cardNumber, cardHolder, expirationDate },
        mocks: {
          $successMessage: successMsgSpy,
          $errorMessage: errorMsgSpy
        },
        stubs: ['el-card', 'el-input', 'el-button']
      })
    }
  }

  return builder
}