cypress changes

babel.config.json

@@ -12,9 +12,11 @@
     ],
     "@babel/preset-react"
   ],
+  "generatorOpts": {
+    "importAttributesKeyword": "with"
+  },
   "sourceType": "unambiguous",
   "plugins": [
-    "@babel/plugin-transform-object-rest-spread",
     "@babel/plugin-transform-class-properties",
     "@babel/plugin-transform-runtime",
     "@babel/plugin-syntax-dynamic-import",

cypress.config.js

@@ -1,5 +1,70 @@
 import { defineConfig } from 'cypress'
-import vitePreprocessor from 'cypress-vite'
+import path from 'path'
+import { build } from 'vite'
+import chokidar from 'chokidar'
+
+const watchers = {}
+
+function customVitePreprocessor(userConfig) {
+  const config = typeof userConfig === 'string' ? { configFile: userConfig } : userConfig ?? {}
+
+  return async (file) => {
+    const { outputPath, filePath, shouldWatch } = file
+    const fileName = path.basename(outputPath)
+    const filenameWithoutExtension = path.basename(
+      outputPath,
+      path.extname(outputPath)
+    )
+    if (shouldWatch && !watchers[filePath]) {
+      let initial = true
+      watchers[filePath] = chokidar.watch(filePath)
+      file.on('close', async () => {
+        await watchers[filePath].close()
+        delete watchers[filePath]
+      })
+
+      watchers[filePath].on('all', () => {
+        if (!initial) {
+          file.emit('rerun')
+        }
+
+        initial = false
+      })
+    }
+
+    const defaultConfig = {
+      logLevel: 'warn',
+      define: {
+        'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
+      },
+      build: {
+        emptyOutDir: false,
+        minify: false,
+        outDir: path.dirname(outputPath),
+        sourcemap: true,
+        write: true,
+        watch: null,
+        lib: {
+          entry: filePath,
+          fileName: () => fileName,
+          formats: ['es'],
+          name: filenameWithoutExtension
+        },
+        rollupOptions: {
+          output: {
+            manualChunks: false
+          }
+        }
+      }
+    }
+    await build({
+      ...config,
+      ...defaultConfig
+    })
+
+    return outputPath
+  }
+}
 
 export default defineConfig({
   viewportWidth: 1400,
@@ -14,15 +79,7 @@ export default defineConfig({
   },
   e2e: {
     setupNodeEvents(on) {
-      on('file:preprocessor', vitePreprocessor({
-        build: {
-          rollupOptions: {
-            output: {
-              format: 'es'
-            }
-          }
-        }
-      }))
+      on('file:preprocessor', customVitePreprocessor())
     }
   }
 })

cypress/e2e/paths/search/granules/collection_details/collection_details.cy.js

@@ -5,14 +5,14 @@ import { graphQlGetSubscriptionsQuery } from '../../../../../support/graphQlGetS
 import { commafy } from '../../../../../../static/src/js/util/commafy'
 import { pluralize } from '../../../../../../static/src/js/util/pluralize'
 
-import assocatedDoisGraphQlBody from './__mocks__/associated_dois/graphql.body.json'
-import collectionsBody from './__mocks__/common/collections.body.json'
-import commonHeaders from './__mocks__/common/common.headers.json'
-import associatedDoisGranulesBody from './__mocks__/associated_dois/granules.body.json'
-import graphQlHeaders from './__mocks__/common/graphql.headers.json'
-import reformattingGraphQlBody from './__mocks__/reformattings/graphql.body.json'
-import reformattingsGranulesBody from './__mocks__/reformattings/granules.body.json'
-import getSubscriptionsGraphQlBody from './__mocks__/common/getSubscriptions.graphql.body.json'
+import assocatedDoisGraphQlBody from './__mocks__/associated_dois/graphql.body.json' with { type: 'json' }
+import collectionsBody from './__mocks__/common/collections.body.json' with { type: 'json' }
+import commonHeaders from './__mocks__/common/common.headers.json' with { type: 'json' }
+import associatedDoisGranulesBody from './__mocks__/associated_dois/granules.body.json' with { type: 'json' }
+import graphQlHeaders from './__mocks__/common/graphql.headers.json' with { type: 'json' }
+import reformattingGraphQlBody from './__mocks__/reformattings/graphql.body.json' with { type: 'json' }
+import reformattingsGranulesBody from './__mocks__/reformattings/granules.body.json' with { type: 'json' }
+import getSubscriptionsGraphQlBody from './__mocks__/common/getSubscriptions.graphql.body.json' with { type: 'json' }
 
 /**
  * Tests the search panel header and meta text for results size

cypress/plugins/index.js

@@ -12,14 +12,14 @@
 // This function is called when a project is opened or re-opened (e.g. due to
 // the project's config changing)
 
-const { startDevServer } = require('@cypress/vite-dev-server')
+// const vitePreprocessor = require('cypress-vite')
 
-module.exports = (on, config) => {
-  // `on` is used to hook into various events Cypress emits
-  // `config` is the resolved Cypress config
+// module.exports = (on, config) => {
+//   // `on` is used to hook into various events Cypress emits
+//   // `config` is the resolved Cypress config
 
-  require('@cypress/code-coverage/task')(on, config)
-  on('dev-server:start', (options) => startDevServer({ options }))
+//   // require('@cypress/code-coverage/task')(on, config)
+//   // on('file:preprocessor', vitePreprocessor())
 
-  return config
-}
+//   // return config
+// }

package.json

@@ -71,8 +71,9 @@
     "aws-sdk-client-mock": "^4.0.0",
     "babel-jest": "^28.1.0",
     "babel-plugin-istanbul": "^6.1.1",
+    "chokidar": "^3.6.0",
     "cookies": "^0.7.3",
-    "cypress": "^13.9.0",
+    "cypress": "^13.12.0",
     "cypress-file-upload": "^5.0.8",
     "cypress-rollup-preprocessor": "^1.2.0",
     "cypress-vite": "^1.5.0",
@@ -100,7 +101,6 @@
     "vite": "^5.2.11",
     "vite-plugin-babel": "^1.2.0",
     "vite-plugin-node-polyfills": "^0.21.0",
-    "vite-plugin-simple-html": "^0.1.2",
     "webpack-dev-server": "^4.8.1"
   },
   "dependencies": {

vite.config.js

@@ -1,5 +1,6 @@
 import postcss from '@vituum/vite-plugin-postcss'
 import react from '@vitejs/plugin-react'
+import babel from 'vite-plugin-babel'
 import { nodePolyfills } from 'vite-plugin-node-polyfills'
 import { ViteEjsPlugin } from 'vite-plugin-ejs'
 import { resolve } from 'path'
@@ -44,8 +45,22 @@ export default {
         }
       }
     }),
+    babel({
+      babelConfig: {
+        babelrc: false,
+        configFile: false,
+        presets: [
+          '@babel/preset-react'
+        ],
+        plugins: [
+          '@babel/plugin-transform-class-properties',
+          '@babel/plugin-transform-runtime',
+          '@babel/plugin-syntax-dynamic-import',
+          '@babel/plugin-syntax-import-attributes'
+        ]
+      }
+    }),
     postcss(),
-    // Handle crypto and stream polyfills.
     nodePolyfills({
       protocolImports: true
     })