Reload page getting stuck in loop for component testing

[maxkopych]

Current behavior

Allow reload page for component testing. Currently when you trying to reload page it start over entire test and got stuck in loop.

Desired behavior

Reload page and re-init all runtime values. I think it good to have ability to reload page because imports in JS behaves as singleton every time when you mount without refresh basically updating the same object.

Test code to reproduce

My test:

it("mounts 1", () => {
    cy.mount(MyComponent);
});

it("mounts 2", () => {
    cy.reload(); // If I'm adding reload it's start over with mount 1 and getting stuck in loop
    cy.mount(MyComponent);
});

store.js

import {createStore} from "vuex";

export default createStore({
    state: {
        test: null,
    },
    mutations: {
        setTest(state, val){
            state.test = val;
        }
    }
});

commands.js

import store from "./store";
import {mount} from "cypress/vue";

Cypress.Commands.add("mount", (component, options = {}) => {
    // Add Vuex plugin
    options.global = options.global || {};
    options.global.plugins = options.global.plugins || [];
    options.global.plugins.push({
        install(app) {
            app.use(store);
            console.log(store.state.test); // If I don't have reload. 1st mount null, 2nd mount value will be 1 from prev mount
            store.commit("setTest", 1);
        },
    });

    return mount(component, options);
});

Cypress Version

13.6.0

Node version

v18.17.1

Operating System

WSL2

Debug Logs

No response

Other

No response

[thomasboyt]

Ran into this and was pretty surprised by it. Not easy to fix because the reload in my case is coming from a library, so it's not as simple as adding some kind of mocking or should reload boolean to the root component props. Can't just stub window.reload() itself out either, for the same reason mentioned in #8266 (comment).