give up on alias imports in cypress

.circleci/config.yml

@@ -1,7 +1,7 @@
 version: 2.1
 
 orbs:
-  cypress: cypress-io/cypress@1.29.0
+  cypress: cypress-io/cypress@3
 
 executors:
   default:

.eslintrc.js

@@ -120,6 +120,7 @@ module.exports = {
         'pages/**/*.js',
         '**/*.stories.tsx',
         '**/*.stories.js',
+        './cypress.config.ts',
       ],
       rules: {
         'import/no-default-export': 'off',

cypress.config.ts

@@ -0,0 +1,32 @@
+import { defineConfig } from 'cypress';
+import cypressCodeCoverage from '@cypress/code-coverage/task';
+import cypressCodeUseBabelrc from '@cypress/code-coverage/use-babelrc';
+
+export default defineConfig({
+  projectId: 'dbquo6',
+  viewportWidth: 1600,
+  viewportHeight: 1200,
+  requestTimeout: 10000,
+  env: {
+    RETRIES: 2,
+    codeCoverage: {
+      url: '/api/__coverage__',
+    },
+  },
+  retries: {
+    runMode: 2,
+    openMode: 2,
+  },
+  e2e: {
+    setupNodeEvents(on, config) {
+      if (!!process.env.CI) {
+        cypressCodeCoverage(on, config);
+        on('file:preprocessor', cypressCodeUseBabelrc);
+      }
+
+      return config;
+    },
+    baseUrl: 'http://localhost:3000',
+    specPattern: './**/*.spec.cy.ts',
+  },
+});

cypress/e2e/faq.spec.js → cypress/e2e/faq.spec.cy.ts

@@ -1,4 +1,4 @@
-import { ACCORDION_CONTENT, ACCORDION_TOGGLE_BUTTON } from '@/common/constants/testIDs';
+import { ACCORDION_CONTENT, ACCORDION_TOGGLE_BUTTON } from '../../common/constants/testIDs';
 
 describe('faq', () => {
   beforeEach(() => {
@@ -8,6 +8,7 @@ describe('faq', () => {
 
   it('reveals text after clicking "SHOW"', () => {
     cy.findByTestId(ACCORDION_CONTENT).should('not.exist');
+    // @ts-expect-error - This seems to be incorrect 🤷🏼‍♂️
     cy.findAllByTestId(ACCORDION_TOGGLE_BUTTON).then(([firstButton]) => firstButton.click());
     cy.findAllByTestId(ACCORDION_CONTENT).should('be.visible');
   });

cypress/e2e/hashlink.spec.js → cypress/e2e/hashlink.spec.cy.ts

@@ -1,13 +1,14 @@
-import { HERO_BANNER_H1 } from '@/common/constants/testIDs';
+import { HERO_BANNER_H1 } from '../../common/constants/testIDs';
 
 describe('Hash Links', () => {
-  const verifyHashLink = (title, path) => {
+  const verifyHashLink = (_title: string, path: string) => {
     cy.visitAndWaitFor(path);
 
     cy.findAllByTestId(HERO_BANNER_H1).should('be.visible');
 
-    cy.findAllByTestId('Hash Link').each(link => {
-      const { hash } = link[0];
+    // @ts-expect-error - This seems to be incorrect 🤷🏼‍♂️
+    cy.findAllByTestId('Hash Link').each(([link]) => {
+      const { hash } = link;
 
       cy.get(hash).scrollIntoView();
 
@@ -38,8 +39,9 @@ describe('Hash Links', () => {
         cy.visitAndWaitFor(path);
         cy.viewport('iphone-6');
 
-        cy.findAllByTestId('Hash Link').each(link => {
-          const { hash } = link[0];
+        // @ts-expect-error - This seems to be incorrect 🤷🏼‍♂️
+        cy.findAllByTestId('Hash Link').each(([link]) => {
+          const { hash } = link;
 
           cy.get(hash).should('not.be.visible');
         });

cypress/e2e/join.spec.js → cypress/e2e/join.spec.cy.ts

@@ -1,7 +1,7 @@
 import jwtDecode from 'jwt-decode';
-import { validationErrorMessages } from '@/common/constants/messages';
-import existingUser from '@/test-utils/mocks/existingUser';
-import mockUser from '@/test-utils/mockGenerators/mockUser';
+import { validationErrorMessages } from '../../common/constants/messages';
+import existingUser from '../../test-utils/mocks/existingUser';
+import mockUser from '../../test-utils/mockGenerators/mockUser';
 
 const validUser = mockUser();
 const inputFields = {
@@ -45,8 +45,7 @@ const assertFailedLogin = ({
 
 describe('join', () => {
   beforeEach(() => {
-    cy.server();
-    cy.route('POST', 'auth/registration/').as('postRegister');
+    cy.intercept('POST', 'auth/registration/').as('postRegister');
 
     cy.visitAndWaitFor('/join');
 
@@ -313,9 +312,9 @@ describe('join', () => {
     cy.getCookies().then(([tokenCookie]) => {
       const jwt = jwtDecode(tokenCookie.value);
 
-      expect(jwt.firstName).to.exist;
-      expect(jwt.lastName).to.exist;
-      expect(jwt.zipcode).to.exist;
+      cy.wrap(jwt).invoke('firstName').should('exist');
+      cy.wrap(jwt).invoke('lastName').should('exist');
+      cy.wrap(jwt).invoke('zipcode').should('exist');
     });
   });
 });

cypress/e2e/podcast.spec.js → cypress/e2e/podcast.spec.cy.ts

@@ -1,6 +1,5 @@
 describe('podcast', () => {
   beforeEach(() => {
-    cy.server();
     cy.visitAndWaitFor('/podcast');
     cy.get('h1').should('have.text', 'Podcast');
   });

cypress/e2e/team.spec.js → cypress/e2e/team.spec.cy.ts

@@ -1,6 +1,5 @@
 describe('team', () => {
   beforeEach(() => {
-    cy.server();
     cy.visitAndWaitFor('/team');
     cy.get('h1').should('have.text', 'The Team');
   });

cypress/support/commands.ts

@@ -0,0 +1,60 @@
+/// <reference types="cypress" />
+import '@testing-library/cypress/add-commands';
+import existingUser from '../../test-utils/mocks/existingUser';
+import { apiUrl } from '../../common/config/environment';
+
+Cypress.Commands.add('visitAndWaitFor', path => {
+  cy.visit(path);
+  cy.findByTestId('Desktop Nav').should('exist').and('be.visible');
+  cy.url().should('contain', path);
+});
+
+// Use `cy.login()` to quickly login for testing authenticated routes
+Cypress.Commands.add('login', () => {
+  cy.request({
+    method: 'POST',
+    url: `${apiUrl}/auth/login/`,
+    body: {
+      ...existingUser,
+    },
+  }).then(({ body: { token } }) => {
+    cy.setCookie('token', token);
+  });
+});
+
+Cypress.Commands.add('checkCustomDataAttribute', (attribute, value) => {
+  const attributeWithoutBrackets = attribute.replace(/[[\]]/g, '');
+
+  cy.get(attribute).invoke('attr', attributeWithoutBrackets).should('contain', value);
+});
+
+Cypress.Commands.add('findSelectByLabelText', (label, options = {}) => {
+  cy.findByText(label)
+    .invoke('attr', 'for')
+    .then(name => {
+      if (options.edit) {
+        cy.get(`input#react-select-${name}-input`);
+      } else {
+        cy.get(`input[name="${name}"]`);
+      }
+    });
+});
+
+/* eslint-disable @typescript-eslint/no-namespace */
+declare global {
+  namespace Cypress {
+    interface Chainable {
+      /** Visit a page safely by validating the URL only after a layout-specific test ID has been found. */
+      visitAndWaitFor(path: string): void;
+
+      /** Login with a predefined user */
+      login(): void;
+
+      /** Check a custom data attribute */
+      checkCustomDataAttribute(attribute: string, value: string): void;
+
+      /** Find a select input by its label */
+      findSelectByLabelText(label: string, options?: { edit?: boolean }): void;
+    }
+  }
+}

cypress/support/e2e.js → cypress/support/e2e.ts

@@ -13,12 +13,8 @@
 // https://on.cypress.io/configuration
 // ***********************************************************
 
-// Import commands.js using ES2015 syntax:
 import './commands';
 import '@cypress/code-coverage/support';
 
-// Alternatively you can use CommonJS syntax:
-// require('./commands')
-
 // beforeEach(() => {
 // });