Custom Cypress command for visiting a page with custom media matcher stubs & locale support

cypress-visit-with-matcher.ts

export interface MatcherOptions {
  darkMode: boolean;
  prefersReducedMotion?: boolean;
  overrideLocale?: string;
}

declare global {
  namespace Cypress {
    interface Chainable {
      /**
       * Helper for visiting a page with specific media matcher / locale options.
       *
       * @param url
       * @param options
       */
      visitWithMatcherOptions(
        url: string,
        options: MatcherOptions,
        beforeLoadFn?: (win: Cypress.AUTWindow) => void,
      ): Chainable<Element>;
    }
  }
}

Cypress.Commands.add(
  'visitWithMatcherOptions',
  (url, options, beforeLoadFn) => {
    cy.visit(url, {
      onBeforeLoad(win) {
        cy.stub(win, 'matchMedia')
          .withArgs('(prefers-color-scheme: dark)')
          .returns({
            matches: !options.darkMode,
            addEventListener: () => {
              // no-op
            },
            addListener: () => {
              // no-op
            },
          })
          .withArgs('(prefers-reduced-motion)')
          .returns({
            matches: !!options.prefersReducedMotion,
            addListener: () => {
              // no-op
            },
          });

        if (options.overrideLocale) {
          Object.defineProperty(win.navigator, 'languages', {
            value: [options.overrideLocale],
          });
        }

        if (beforeLoadFn) beforeLoadFn(win);
      },
    });
  },
);