test file

cypress.config.js

const { defineConfig } = require('cypress')

module.exports = defineConfig({
  fixturesFolder: 'cypress/fixtures',
  screenshotsFolder: 'cypress/screenshots',
  videosFolder: 'cypress/videos',
  e2e: {
    setupNodeEvents(on, config) {
    },
    baseUrl: 'https://the-internet.herokuapp.com/',
  },
})

cypress_e2e_viewport.cy.js

function setViewport(width, height) {
  Cypress.config('viewportWidth', width)
  Cypress.config('viewportHeight', height)
}

describe('Sample Tests', () => {
  it('viewport change', () => {
    cy.visit('/')
    const vpWidth = Cypress.config('viewportWidth')
    const vpHeight = Cypress.config('viewportHeight')
    cy.wrap(vpWidth).should('not.be.undefined')
    cy.wrap(vpHeight).should('not.be.undefined')

    cy.setViewport(vpWidth+100, vpHeight+100)   // custom command: does NOT work
    cy.viewport(vpWidth+100, vpHeight+100)      // does NOT work
    setViewport(vpWidth+100, vpHeight+100)      // works

    const vpWidthNew = Cypress.config('viewportWidth')
    const vpHeightNew = Cypress.config('viewportHeight')

    cy.wrap(vpWidthNew).should('equal', vpWidth+100)
    cy.wrap(vpHeightNew).should('equal', vpHeight+100)

    cy.setViewport(vpWidth, vpHeight)       // custom command: does NOT work
    cy.viewport(vpWidth, vpHeight)          // does NOT work
    setViewport(vpWidth, vpHeight)          // works

    const vpWidthOriginal = Cypress.config('viewportWidth')
    const vpHeightOriginal = Cypress.config('viewportHeight')

    cy.wrap(vpWidthOriginal).should('equal', vpWidth)
    cy.wrap(vpHeightOriginal).should('equal', vpHeight)
  })
})

cypress_support_e2e.js

Cypress.on('viewport:changed', (newValue) => {
  Cypress.config('viewportWidth', newValue.viewportWidth)
  Cypress.config('viewportHeight', newValue.viewportHeight)
})

Cypress.Commands.add('setViewport', (viewportWidth, viewportHeight) => {
  cy.viewport(viewportWidth, viewportHeight)
  Cypress.config('viewportWidth', viewportWidth)
  Cypress.config('viewportHeight', viewportHeight)
})