Cypress + RequireJS: How to ESM import define from RequireJS?

56 Views Asked by At

I am working with cypress.config.ts for Cypress Testing

I am receiving Invalid Config Reference Error: define is not defined

Error:

ReferenceError: define is not defined
    at file:///../cypress.config.ts:1:1
    at ModuleJob.run (node:internal/modules/esm/module_job:218:25)
    at async ModuleLoader.import (node:internal/modules/esm/loader:329:24)
    at async importModuleDynamicallyWrapper (node:internal/vm/module:431:15)
    at async loadFile (/home/me/.cache/Cypress/13.6.2/Cypress/resources/app/node_modules/@packages/server/lib/plugins/child/run_require_async_child.js:106:14)
    at async EventEmitter.<anonymous> (/home/me/.cache/Cypress/13.6.2/Cypress/resources/app/node_modules/@packages/server/lib/plugins/child/run_require_async_child.js:116:32) 

I believe the source of this issue is that the website I am testing is using a library that uses define from requirejs. I do not have control to change or remove requirejs

I am unable to figure out how to use ESM imports with define from requirejs?

import requireJS from 'requirejs;? Not sure if define is accessible from requirejs.define`

But that does not solve my problem in specifying define without requirejsto resolve the reference error. Or its what I think is going to resolve the Reference Error.

import requireJS from 'requirejs;` requirejs.define as define

Is amdefine possibly a solution? https://github.com/jrburke/amdefine

cypress.config.ts

import { defineConfig } from 'cypress';
import plugin from 'cypress-mochawesome-reporter/plugin';
import getCompareSnapshotsPlugin from 'cypress-visual-regression/dist/plugin';
import 'dotenv/config';

// eslint-disable-next-line import/no-default-export
export default defineConfig({
  env: {
    ...
  },

  viewportWidth: 1500,

  reporter: 'cypress-mochawesome-reporter',
  reporterOptions: {
    charts: true,
    embeddedScreenshots: true,
    inlineAssets: true,
    saveAllAttempts: false,
  },

  e2e: {
    setupNodeEvents(on, config) {
      plugin(on);
      return getCompareSnapshotsPlugin(on, config);
    },
    baseUrl: publishURL,
    specPattern: 'cypress/e2e/**/*.cy.{js,jsx,ts,tsx}',

  },

  component: {
    devServer: {
      framework: 'react',
      bundler: 'vite',
    },
    supportFile: 'cypress/support/component.tsx',
  },
});

0

There are 0 best solutions below