Cypress component tests: stub window methods (only relevant code)

Login.spec.ts

import Login from 'Login.vue'
import win from 'window.ts'

it('pre-populates the email input from search params', () => {
  // Stub search params
  cy.stub(win, 'getLocationSearch').returns(`?email=${encodeURIComponent(user.email)}`)

  mount(Login)

  // Email input should be pre-populated
  cy.getTestId(testids.email).should('have.value', user.email)
})

Login.vue

import win from 'window.ts'

setup () {
  onMounted(async () => {
    // Get URL params
    const urlParams = new URLSearchParams(win.getLocationSearch())

    // Set email if in route params
    const emailInParams = urlParams?.get('email')
    if (emailInParams) {
      formData.email = emailInParams
    }
  }
}

window.ts

// Using a function to retrieve window.location properties so it can be stubbed in Cypress component tests
const win = {
  getLocationSearch: (): string => {
    if (typeof window === 'undefined') return ''
    return window.location.search
  },

  getLocationHostname: (): string => {
    if (typeof window === 'undefined') return ''
    return window.location.hostname
  },

  getLocationHref: (): string => {
    if (typeof window === 'undefined') return ''
    return window.location.href
  },

  getLocationPathname: (): string => {
    if (typeof window === 'undefined') return ''
    return window.location.pathname
  },

  getLocationOrigin: (): string => {
    if (typeof window === 'undefined') return ''
    return window.location.origin
  },

  setLocationHref: (url: string): void => {
    if (typeof window === 'undefined') return
    window.location.href = url
  },

}