diff --git a/cypress/support/commands.tsx b/cypress/support/commands.tsx
index d4bb345849..aaacd9f189 100644
--- a/cypress/support/commands.tsx
+++ b/cypress/support/commands.tsx
@@ -63,27 +63,39 @@ import {store} from "../../src/app/state";
import {createBrowserRouter, createRoutesFromElements, Route, To} from "react-router";
import { RouterProvider } from 'react-router-dom';
import { ACTION_TYPE } from '../../src/app/services';
+import { v4 as uuid_v4 } from 'uuid';
Cypress.Commands.add('mountWithStoreAndRouter', (component, routes, initialRoute=routes?.[0], user, mountOptions) => {
- const router = createBrowserRouter(createRoutesFromElements(<>
- {routes?.length
- ? routes.map(route => )
- :
- }
- >));
+ cy.window().then(window => {
+ // createBrowserRouter errors with `TypeError: Cannot read properties of null (reading 'history')` if the global window is not defined.
+ // this seems to fatally affect test setups where the "same" component is mounted across multiple tests (c.f. MyGameboards.cy.tsx),
+ // presumably because there is some state that is not correctly flushed across the tests' teardown/setup.
+ //
+ // wrapping the router creation in a `cy.window().then` seems to fix the issue issue with the global window not being defined;
+ // passing a rerender key to the mount function fixes the issue with stale mounted components being used across tests.
+ const uuid = uuid_v4();
- if (user) {
- void store.dispatch({type: ACTION_TYPE.CURRENT_USER_RESPONSE_SUCCESS, user});
- }
+ const router = createBrowserRouter(createRoutesFromElements(<>
+ {routes?.length
+ ? routes.map(route => )
+ :
+ }
+ >), { window });
- void router.navigate(initialRoute || '/');
-
- mount(
-
-
- ,
- mountOptions
- );
+ if (user) {
+ void store.dispatch({type: ACTION_TYPE.CURRENT_USER_RESPONSE_SUCCESS, user});
+ }
+
+ void router.navigate(initialRoute || '/');
+
+ mount(
+
+
+ ,
+ mountOptions,
+ uuid
+ );
+ });
});
import "@frsource/cypress-plugin-visual-regression-diff/dist/support";