chore: try Vite 3 pre-release

npm/vite-dev-server/cypress/e2e/react.cy.ts

@@ -4,7 +4,7 @@ import dedent from 'dedent'
 
 type ProjectDirs = typeof fixtureDirs
 
-const VITE_REACT: ProjectDirs[number][] = ['vite2.8.6-react', 'vite2.9.1-react']
+const VITE_REACT: ProjectDirs[number][] = ['vite-2-react', 'vite-3-react']
 
 // Add to this list to focus on a particular permutation
 const ONLY_PROJECTS: ProjectDirs[number][] = []

npm/vite-dev-server/cypress/e2e/vite-dev-server.cy.ts

@@ -2,8 +2,8 @@
 
 describe('Config options', () => {
   it('supports supportFile = false', () => {
-    cy.scaffoldProject('vite2.9.1-react')
-    cy.openProject('vite2.9.1-react', ['--config-file', 'cypress-vite-no-support.config.ts'])
+    cy.scaffoldProject('vite-2-react')
+    cy.openProject('vite-2-react', ['--config-file', 'cypress-vite-no-support.config.ts'])
     cy.startAppServer('component')
 
     cy.visitApp()
@@ -13,8 +13,8 @@ describe('Config options', () => {
   })
 
   it('chooses new port when specified port is in use', () => {
-    cy.scaffoldProject('vite2.9.1-react')
-    cy.openProject('vite2.9.1-react', ['--config-file', 'cypress-vite-port-in-use.config.ts'])
+    cy.scaffoldProject('vite-2-react')
+    cy.openProject('vite-2-react', ['--config-file', 'cypress-vite-port-in-use.config.ts'])
     cy.startAppServer('component')
 
     cy.visitApp()
@@ -32,8 +32,8 @@ describe('Config options', () => {
   it('supports serving files with whitespace', () => {
     const specWithWhitespace = 'spec with whitespace.cy.jsx'
 
-    cy.scaffoldProject('vite2.9.1-react')
-    cy.openProject('vite2.9.1-react', ['--config-file', 'cypress-vite.config.ts'])
+    cy.scaffoldProject('vite-2-react')
+    cy.openProject('vite-2-react', ['--config-file', 'cypress-vite.config.ts'])
     cy.startAppServer('component')
 
     cy.withCtx(async (ctx, { specWithWhitespace }) => {
@@ -49,8 +49,8 @@ describe('Config options', () => {
   })
 
   it('supports @cypress/vite-dev-server', () => {
-    cy.scaffoldProject('vite2.9.1-react')
-    cy.openProject('vite2.9.1-react', ['--config-file', 'cypress-vite-dev-server-function.config.ts'])
+    cy.scaffoldProject('vite-2-react')
+    cy.openProject('vite-2-react', ['--config-file', 'cypress-vite-dev-server-function.config.ts'])
     cy.startAppServer('component')
 
     cy.visitApp()

npm/vite-dev-server/test/resolveConfig.spec.ts

@@ -52,7 +52,7 @@ describe('resolveConfig', function () {
       })
 
       it('should not add inspect plugin if not installed', async () => {
-        const projectRoot = await scaffoldSystemTestProject('vite2.9.1-react')
+        const projectRoot = await scaffoldSystemTestProject('vite-2-react')
         const viteDevServerConfig = getViteDevServerConfig(projectRoot)
 
         const viteConfig = await createViteDevServerConfig(viteDevServerConfig, vite)

system-tests/__snapshots__/vite_dev_server_fresh_spec.ts.js

@@ -1,4 +1,4 @@
-exports['@cypress/vite-dev-server react executes all of the tests for vite2.8.6-react 1'] = `
+exports['@cypress/vite-dev-server react executes all of the tests for vite-2-react 1'] = `
 
 ====================================================================================================
 
@@ -208,7 +208,7 @@ When Cypress detects uncaught errors originating from your test code it will aut
 
 `
 
-exports['@cypress/vite-dev-server react executes all of the tests for vite2.9.1-react 1'] = `
+exports['@cypress/vite-dev-server react executes all of the tests for vite-3-react 1'] = `
 
 ====================================================================================================
 
@@ -267,7 +267,7 @@ exports['@cypress/vite-dev-server react executes all of the tests for vite2.9.1-
   1) An uncaught error was detected outside of a test:
      TypeError: The following error originated from your test code, not from Cypress.
 
-  > Failed to fetch dynamically imported module: http://localhost:3000/__cypress/src/src/AppCompilationError.cy.jsx
+  > Failed to fetch dynamically imported module: http://localhost:5173/__cypress/src/src/AppCompilationError.cy.jsx
 
 When Cypress detects uncaught errors originating from your test code it will automatically fail the current test.
 

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

@@ -1,5 +1,15 @@
 const {defineConfig} = require('vite')
 
 module.exports = defineConfig({
-  logLevel: 'silent'
-})
+  logLevel: 'silent',
+  server: {
+    fs: {
+      // this is needed to run on CI since we
+      // do some magic with symlinks and caching
+      // to make everything fast, that Vite does
+      // not seem to like.
+      // https://vitejs.dev/config/#server-fs-allow
+      allow: ['/root/cypress/', '/root/.cache/', '/tmp/', '/Users/', '/private/'],
+    },
+  },
+})

system-tests/projects/vite2.9.1-react/package.json → system-tests/projects/vite-2-react/package.json

@@ -1,8 +1,11 @@
 {
+  "dependencies": {
+    "react": "17.0.2",
+    "react-dom": "17.0.2"
+  },
   "devDependencies": {
     "@cypress/vite-dev-server": "file:../../../npm/vite-dev-server",
-    "react": "^17.0.0",
-    "vite": "2.9.1"
+    "vite": "2.9.14"
   },
   "projectFixtureDirectory": "react"
 }