test: webpack and vite dev-server

cli/types/cypress.d.ts

@@ -5500,7 +5500,7 @@ declare namespace Cypress {
 
   interface DevServerConfig {
     specs: Spec[]
-    config: ResolvedConfigOptions & RuntimeConfigOptions
+    cypressConfig: PluginConfigOptions
     devServerEvents: NodeJS.EventEmitter
   }
 

npm/webpack-dev-server/cypress/e2e/cjs-esm.cy.ts

@@ -0,0 +1,191 @@
+/// <reference path="../support/e2e.ts" />
+
+describe('CJS ESM', () => {
+  context('js', () => {
+    context('cjs', () => {
+      it('should load', () => {
+        cy.scaffoldProject('react-webpack-cjs')
+        cy.openProject('react-webpack-cjs')
+        cy.startAppServer('component')
+
+        cy.visitApp()
+        cy.contains('App.cy').click()
+        cy.waitForSpecToFinish()
+        cy.get('.passed > .num').should('contain', 1)
+      })
+
+      it('should load with import of webpack.config.js', () => {
+        cy.scaffoldProject('react-webpack-cjs')
+        cy.openProject('react-webpack-cjs', ['--config-file', 'cypress-webpack-import.config.js'])
+        cy.startAppServer('component')
+
+        cy.visitApp()
+        cy.contains('App.cy').click()
+        cy.waitForSpecToFinish()
+        cy.get('.passed > .num').should('contain', 1)
+      })
+
+      it('should load with custom dev-server', () => {
+        cy.scaffoldProject('react-webpack-cjs')
+        cy.openProject('react-webpack-cjs', ['--config-file', 'cypress-custom-dev-server.config.js'])
+        cy.startAppServer('component')
+
+        cy.visitApp()
+        cy.contains('App.cy').click()
+        cy.waitForSpecToFinish()
+        cy.get('.passed > .num').should('contain', 1)
+      })
+
+      it('should load with custom dev-server with import of webpack.config.js', () => {
+        cy.scaffoldProject('react-webpack-cjs')
+        cy.openProject('react-webpack-cjs', ['--config-file', 'cypress-custom-dev-server-webpack-import.config.js'])
+        cy.startAppServer('component')
+
+        cy.visitApp()
+        cy.contains('App.cy').click()
+        cy.waitForSpecToFinish()
+        cy.get('.passed > .num').should('contain', 1)
+      })
+    })
+
+    context('esm', () => {
+      it('should load', () => {
+        cy.scaffoldProject('react-webpack-esm')
+        cy.openProject('react-webpack-esm')
+        cy.startAppServer('component')
+
+        cy.visitApp()
+        cy.contains('App.cy').click()
+        cy.waitForSpecToFinish()
+        cy.get('.passed > .num').should('contain', 1)
+      })
+
+      it('should load with import of webpack.config.js', () => {
+        cy.scaffoldProject('react-webpack-esm')
+        cy.openProject('react-webpack-esm', ['--config-file', 'cypress-webpack-import.config.js'])
+        cy.startAppServer('component')
+
+        cy.visitApp()
+        cy.contains('App.cy').click()
+        cy.waitForSpecToFinish()
+        cy.get('.passed > .num').should('contain', 1)
+      })
+
+      it('should load with custom dev-server', () => {
+        cy.scaffoldProject('react-webpack-esm')
+        cy.openProject('react-webpack-esm', ['--config-file', 'cypress-custom-dev-server.config.js'])
+        cy.startAppServer('component')
+
+        cy.visitApp()
+        cy.contains('App.cy').click()
+        cy.waitForSpecToFinish()
+        cy.get('.passed > .num').should('contain', 1)
+      })
+
+      it('should load with custom dev-server with import of webpack.config.js', () => {
+        cy.scaffoldProject('react-webpack-esm')
+        cy.openProject('react-webpack-esm', ['--config-file', 'cypress-custom-dev-server-webpack-import.config.js'])
+        cy.startAppServer('component')
+
+        cy.visitApp()
+        cy.contains('App.cy').click()
+        cy.waitForSpecToFinish()
+        cy.get('.passed > .num').should('contain', 1)
+      })
+    })
+  })
+
+  context('ts', () => {
+    context('cjs', () => {
+      it('should load', () => {
+        cy.scaffoldProject('react-webpack-ts-cjs')
+        cy.openProject('react-webpack-ts-cjs')
+        cy.startAppServer('component')
+
+        cy.visitApp()
+        cy.contains('App.cy').click()
+        cy.waitForSpecToFinish()
+        cy.get('.passed > .num').should('contain', 1)
+      })
+
+      it('should load with import of webpack.config.ts', () => {
+        cy.scaffoldProject('react-webpack-ts-cjs')
+        cy.openProject('react-webpack-ts-cjs', ['--config-file', 'cypress-webpack-import.config.ts'])
+        cy.startAppServer('component')
+
+        cy.visitApp()
+        cy.contains('App.cy').click()
+        cy.waitForSpecToFinish()
+        cy.get('.passed > .num').should('contain', 1)
+      })
+
+      it('should load with custom dev-server', () => {
+        cy.scaffoldProject('react-webpack-ts-cjs')
+        cy.openProject('react-webpack-ts-cjs', ['--config-file', 'cypress-custom-dev-server.config.ts'])
+        cy.startAppServer('component')
+
+        cy.visitApp()
+        cy.contains('App.cy').click()
+        cy.waitForSpecToFinish()
+        cy.get('.passed > .num').should('contain', 1)
+      })
+
+      it('should load with custom dev-server with import of webpack.config.js', () => {
+        cy.scaffoldProject('react-webpack-ts-cjs')
+        cy.openProject('react-webpack-ts-cjs', ['--config-file', 'cypress-custom-dev-server-webpack-import.config.ts'])
+        cy.startAppServer('component')
+
+        cy.visitApp()
+        cy.contains('App.cy').click()
+        cy.waitForSpecToFinish()
+        cy.get('.passed > .num').should('contain', 1)
+      })
+    })
+
+    context('esm', () => {
+      it('should load', () => {
+        cy.scaffoldProject('react-webpack-ts-esm')
+        cy.openProject('react-webpack-ts-esm')
+        cy.startAppServer('component')
+
+        cy.visitApp()
+        cy.contains('App.cy').click()
+        cy.waitForSpecToFinish()
+        cy.get('.passed > .num').should('contain', 1)
+      })
+
+      it('should load with import of webpack.config.ts', () => {
+        cy.scaffoldProject('react-webpack-ts-esm')
+        cy.openProject('react-webpack-ts-esm', ['--config-file', 'cypress-webpack-import.config.ts'])
+        cy.startAppServer('component')
+
+        cy.visitApp()
+        cy.contains('App.cy').click()
+        cy.waitForSpecToFinish()
+        cy.get('.passed > .num').should('contain', 1)
+      })
+
+      it('should load with custom dev-server', () => {
+        cy.scaffoldProject('react-webpack-ts-esm')
+        cy.openProject('react-webpack-ts-esm', ['--config-file', 'cypress-custom-dev-server.config.ts'])
+        cy.startAppServer('component')
+
+        cy.visitApp()
+        cy.contains('App.cy').click()
+        cy.waitForSpecToFinish()
+        cy.get('.passed > .num').should('contain', 1)
+      })
+
+      it('should load with custom dev-server with import of webpack.config.js', () => {
+        cy.scaffoldProject('react-webpack-ts-esm')
+        cy.openProject('react-webpack-ts-esm', ['--config-file', 'cypress-custom-dev-server-webpack-import.config.ts'])
+        cy.startAppServer('component')
+
+        cy.visitApp()
+        cy.contains('App.cy').click()
+        cy.waitForSpecToFinish()
+        cy.get('.passed > .num').should('contain', 1)
+      })
+    })
+  })
+})

system-tests/project-fixtures/react/cypress-vite-dev-server-function.config.ts

@@ -0,0 +1,13 @@
+import { defineConfig } from 'cypress'
+import defaultConfig from './cypress-vite.config'
+import {devServer as cypressViteDevServer} from '@cypress/vite-dev-server'
+
+export default defineConfig({
+  ...defaultConfig,
+  component: {
+    devServer: (devServerOptions) => cypressViteDevServer({
+      ...devServerOptions,
+      framework: 'react'
+    })
+  }
+})

system-tests/project-fixtures/react/cypress-vite-port-in-use.config.ts

@@ -10,7 +10,6 @@ export default defineConfig({
       framework: 'react',
       bundler: 'vite',
       viteConfig: {
-        logLevel: 'silent',
         server: {
           port: 3000
         }

system-tests/project-fixtures/react/cypress-vite.config.ts

@@ -15,9 +15,6 @@ export default defineConfig({
     devServer: {
       framework: 'react',
       bundler: 'vite',
-      viteConfig: {
-        logLevel: 'silent'
-      },
     },
   },
   // These tests should run quickly / fail quickly,

system-tests/project-fixtures/react/cypress-webpack-dev-server-function.config.ts

@@ -0,0 +1,14 @@
+import { defineConfig } from 'cypress'
+import defaultConfig from './cypress-webpack.config'
+import { devServer as cypressWebpackDevServer } from '@cypress/webpack-dev-server'
+
+export default defineConfig({
+  ...defaultConfig,
+  component: {
+    devServer: (devServerOptions) => cypressWebpackDevServer({
+      ...devServerOptions,
+      framework: 'react',
+    }),
+    supportFile: false
+  }
+})

system-tests/project-fixtures/react/vite.config.js

@@ -0,0 +1,5 @@
+const {defineConfig} = require('vite')
+
+module.exports = defineConfig({
+  logLevel: 'silent'
+})

system-tests/projects/react-webpack-cjs/.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["@babel/env", "@babel/preset-react"]
+}

system-tests/projects/react-webpack-cjs/cypress-custom-dev-server-webpack-import.config.js

@@ -0,0 +1,16 @@
+const { defineConfig } = require('cypress')
+const cypressWebpackDevServer = require('@cypress/webpack-dev-server').devServer
+const webpackConfig = require('./webpack.config')
+
+module.exports = defineConfig({
+  component: {
+    devServer: (devServerOptions) => {
+      return cypressWebpackDevServer({
+        ...devServerOptions,
+        framework: 'react',
+        bundler: 'webpack',
+        webpackConfig,
+      })
+    },
+  },
+})

system-tests/projects/react-webpack-cjs/cypress-custom-dev-server.config.js

@@ -0,0 +1,14 @@
+const { defineConfig } = require('cypress')
+const cypressWebpackDevServer = require('@cypress/webpack-dev-server').devServer
+
+module.exports = defineConfig({
+  component: {
+    devServer: (devServerOptions) => {
+      return cypressWebpackDevServer({
+        ...devServerOptions,
+        framework: 'react',
+        bundler: 'webpack',
+      })
+    },
+  },
+})

system-tests/projects/react-webpack-cjs/cypress-webpack-import.config.js

@@ -0,0 +1,12 @@
+const { defineConfig } = require('cypress')
+const webpackConfig = require('./webpack.config.js')
+
+module.exports = defineConfig({
+  component: {
+    devServer: {
+      framework: 'react',
+      bundler: 'webpack',
+      webpackConfig,
+    },
+  },
+})

system-tests/projects/react-webpack-cjs/cypress.config.js

@@ -0,0 +1,10 @@
+const { defineConfig } = require('cypress')
+
+module.exports = defineConfig({
+  component: {
+    devServer: {
+      framework: 'react',
+      bundler: 'webpack',
+    },
+  },
+})

system-tests/projects/react-webpack-cjs/cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "hello@cypress.io",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

system-tests/projects/react-webpack-cjs/cypress/support/commands.js

@@ -0,0 +1,25 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })

system-tests/projects/react-webpack-cjs/cypress/support/component-index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <title>Components App</title>
+  </head>
+  <body>
+    <div data-cy-root></div>
+  </body>
+</html>

system-tests/projects/react-webpack-cjs/cypress/support/component.js

@@ -0,0 +1,27 @@
+// ***********************************************************
+// This example support/component.js 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.js'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')
+
+import { mount } from 'cypress/react'
+
+Cypress.Commands.add('mount', mount)
+
+// Example use:
+// cy.mount(<MyComponent />)