How can I correctly stub and test a Spotify PKCE redirect in Cypress?

I'm new to Cypress and trying to verify that the "Login with Spotify" button in our React app redirects to the correct URL using the Spotify PKCE flow.

On initial load, the app displays a button that constructs an auth URL and sets it directly to window.location.href:

JAVASCRIPTCopied
//spotifyAuth.js

export const getAuthorizationURL = async () => {
  logMessage(`Getting authorization URL...`);
  const authUrl = new URL("https://accounts.spotify.com/authorize");
  const codeVerifier = generateCodeVerifier();
  const codeChallenge = await generateCodeChallenge(codeVerifier);

  // Save the codeVerifier in IndexedDB
  await setCachedEntry('auth', codeVerifier, 'spotify_code_verifier');

  logMessage(`Code verifier: ${codeVerifier}`);

  const state = generateState();
  const params = new URLSearchParams({
    response_type: 'code',
    client_id: CLIENT_ID,
    scope: 'user-library-read',
    state: state,
    redirect_uri: REDIRECT_URI,
    code_challenge_method: 'S256',
    code_challenge: codeChallenge,
  });
  authUrl.search = new URLSearchParams(params).toString();
  const authorizationURL = authUrl.toString();
  logMessage(`Authorization URL: ${authorizationURL}`);
  return { authorizationURL };
};

export const redirectToAuthorizationUrl = async () => {
  logMessage(`Redirecting to authorization URL...`);
  window.location.href = (await getAuthorizationURL()).authorizationURL;
};

My goal is to test that clicking the button triggers a redirect to the correct URL. Since Cypress tests cannot handle multiple origins, I attempted to stub the redirect so I could assert on the URL without actually navigating. My initial test was as follows:

JAVASCRIPTCopied
//login.cy.js

describe('Login Functionality', () => {
    
    describe('When you click Login to Spotify', () => {
        it('constructs the Spotify auth url', () => {
            cy.window().then(window => {
                cy.stub(window.location, 'href').as('redirect')
            })
            cy.visit('/');
            cy.get('.login-button').click();
            cy.get('@redirect').should('be.calledWithMatch', `accounts.spotify.com/authorize`)
        });
    });
});

This resulted in an AssertionError because the stub was never called. I then modified the app code to use a dedicated redirect function so I could stub it instead:

JAVASCRIPTCopied
//spotifyAuth.js

export const redirectToAuthorizationUrl = async () => {
  logMessage(`Redirecting to authorization URL...`);
  const authUrlToNavigateTo = (await getAuthorizationURL()).authorizationURL;
  window.redirectToSpotifyAuth(authUrlToNavigateTo);
};

window.redirectToSpotifyAuth = function (authUrl) {
  window.location.href = authUrl;
};

And updated the test accordingly:

JAVASCRIPTCopied
//login.cy.js

describe('Spotify Login Flow', () => {
    it('should construct correct Spotify auth URL', () => {
      // Stub the redirect function
      cy.visit('http://localhost:3000/', {
        onBeforeLoad(window) {
            window.redirectToSpotifyAuth = () => {};  
            cy.stub(window, 'redirectToSpotifyAuth').as('redirect');
        },
      });
  
      cy.get('.login-button').click();
  
      // Check that redirectToSpotifyAuth was called with the correct URL
      cy.get('@redirect').should('be.calledWithMatch', `accounts.spotify.com/authorize`);
    });
});

However, I still received the same AssertionError.

What am I doing wrong, and how can I properly stub the redirection to verify that the correct URL is constructed?