Add new command to mount with store and router

Author: mwtrew

cypress.config.ts

@@ -12,7 +12,7 @@ export default defineConfig({
           require(`./config/webpack.config.ada.js`) : require(`./config/webpack.config.physics.js`)
     },
     indexHtmlFile: `cypress/support/component-index-${SITE_STRING}.html`,
-    supportFile: `cypress/support/component-${SITE_STRING}.ts`,
+    supportFile: `cypress/support/component-${SITE_STRING}.tsx`,
     setupNodeEvents(on, config) {
       initPlugin(on, config);
     }

cypress/support/commands.ts renamed to cypress/support/commands.tsx

@@ -36,4 +36,43 @@
 //   }
 // }
 
-import "@frsource/cypress-plugin-visual-regression-diff/dist/support";
+import {mount, MountOptions} from 'cypress/react';
+
+// Augment the Cypress namespace to include type definitions for
+// your custom command.
+// Alternatively, can be defined in cypress/support/component.d.ts
+// with a <reference path="./component" /> at the top of your spec.
+declare global {
+    // eslint-disable-next-line @typescript-eslint/no-namespace
+    namespace Cypress {
+        interface Chainable {
+            mountWithStoreAndRouter(component: ReactNode, routes: string[], options: MountOptions): Chainable<Element>;
+        }
+    }
+}
+
+import React, {ReactNode} from "react";
+import {Provider} from "react-redux";
+import {store} from "../../src/app/state";
+import {MemoryRouter} from "react-router";
+
+Cypress.Commands.add('mountWithStoreAndRouter', (component, routes, options) => {
+    mount(
+        <Provider store={store}>
+            <MemoryRouter initialEntries={routes}>
+                {component}
+            </MemoryRouter>
+        </Provider>
+        , options
+    );
+});
+
+import "@frsource/cypress-plugin-visual-regression-diff/dist/support";
+
+// Skip visual regression tests in interactive mode - the results are not consistent with headless.
+// It may be useful to comment this out when debugging tests locally, but don't commit the snapshots.
+if (Cypress.config('isInteractive')) {
+    Cypress.Commands.add('matchImage', () => {
+        cy.log('Skipping snapshot 👀');
+    });
+}

cypress/support/component-ada.ts

@@ -0,0 +1,26 @@
+// ***********************************************************
+// This example support/component-ada.ts is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands';
+
+// Import styles
+import '../../src/scss/cs/isaac.scss';
+
+// Start Mock Service Worker - we use this instead of Cypress API mocking
+import { worker } from '../../src/mocks/browser';
+Cypress.on('test:before:run:async', async () => {
+  await worker.start();
+});

cypress/support/component-ada.tsx

@@ -0,0 +1,26 @@
+// ***********************************************************
+// This example support/component-ada.ts is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands';
+
+// Import styles
+import '../../src/scss/phy/isaac.scss';
+
+// Start Mock Service Worker - we use this instead of Cypress API mocking
+import { worker } from '../../src/mocks/browser';
+Cypress.on('test:before:run:async', async () => {
+  await worker.start();
+});

cypress/support/component-phy.ts

@@ -2,24 +2,11 @@ import React from "react";
 import {MyAssignments} from "../../app/components/pages/MyAssignments";
 import {mockUser} from "../../mocks/data";
 import {PATHS} from "../../app/services";
-import {MemoryRouter} from "react-router";
-import {Provider} from "react-redux";
-import { store } from "../../app/state";
 
 
 it('My Assignments should have no visual regressions', () => {
-    cy.mount(
-        <Provider store={store}>
-            <MemoryRouter initialEntries={[PATHS.MY_ASSIGNMENTS]}>
-                {
-                    // @ts-ignore
-                    <MyAssignments user={mockUser}/>
-                }
-            </MemoryRouter>
-        </Provider>
-    );
-
+    // @ts-ignore
+    cy.mountWithStoreAndRouter(<MyAssignments user={mockUser}/>, [PATHS.MY_ASSIGNMENTS]);
     cy.get('[data-testid="loading"]').should('not.exist');
-
     cy.matchImage();
 });

cypress/support/component-phy.tsx

@@ -26,6 +26,7 @@
   },
   "include": [
     "src",
-    "node_modules/cypress/types/cypress-global-vars.d.ts"
+    "node_modules/cypress/types/cypress-global-vars.d.ts",
+    "cypress"
   ]
 }