fix: sanitize internal vite plugins (#22055)

* fix: sanitize internal vite plugins

npm/vite-dev-server/package.json

@@ -11,8 +11,9 @@
     "cypress:run": "yarn cypress:run-cypress-in-cypress node ../../scripts/cypress run --project . --browser chrome",
     "cypress:run-cypress-in-cypress": "cross-env HTTP_PROXY_TARGET_FOR_ORIGIN_REQUESTS=http://localhost:4455 CYPRESS_REMOTE_DEBUGGING_PORT=6666 TZ=America/New_York",
     "cypress:open": "yarn cypress:run-cypress-in-cypress gulp open --project .",
-    "test": "yarn cypress:run",
-    "watch": "tsc -w"
+    "watch": "tsc -w",
+    "test": "yarn test-unit",
+    "test-unit": "mocha -r ts-node/register/transpile-only --config ./test/.mocharc.js"
   },
   "dependencies": {
     "debug": "4.3.3",
@@ -21,7 +22,11 @@
     "pathe": "0.2.0"
   },
   "devDependencies": {
+    "chai": "^4.3.6",
     "dedent": "^0.7.0",
+    "mocha": "^9.2.2",
+    "sinon": "^13.0.1",
+    "ts-node": "^10.2.1",
     "vite": "2.9.0-beta.3",
     "vite-plugin-inspect": "0.4.3"
   },

npm/vite-dev-server/src/plugins/inspect.ts

@@ -16,7 +16,9 @@ export const CypressInspect = (config: ViteDevServerConfig): PluginOption | null
   try {
     const inspectPluginPath = require.resolve('vite-plugin-inspect', { paths: [config.cypressConfig.projectRoot] })
 
-    Inspect = require(inspectPluginPath).default
+    const inspectModule = require(inspectPluginPath)
+
+    Inspect = inspectModule.default ?? inspectModule
     debug('inspect was found', Inspect)
   } catch (err) {
     debug(`Tried to import the inspect plugin 'vite-plugin-inspect'. It's an optional peerDependency so install it if you'd like.`)

npm/vite-dev-server/src/resolveConfig.ts

@@ -86,7 +86,7 @@ export const createViteDevServerConfig = async (config: ViteDevServerConfig, vit
     plugins: [
       Cypress(config, vite),
       CypressInspect(config),
-    ],
+    ].filter((p) => p != null),
   }
 
   const finalConfig = vite.mergeConfig(viteBaseConfig, viteOverrides as Record<string, any>)

npm/vite-dev-server/test/.mocharc.js

@@ -0,0 +1,4 @@
+module.exports = {
+  spec: 'test/**/*.spec.ts',
+  timeout: 10000,
+}

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

@@ -0,0 +1,65 @@
+import { expect } from 'chai'
+import { EventEmitter } from 'events'
+import * as vite from 'vite'
+import { scaffoldSystemTestProject } from './test-helpers/scaffoldProject'
+import { createViteDevServerConfig } from '../src/resolveConfig'
+import type { ViteDevServerConfig } from '../src/devServer'
+
+const getViteDevServerConfig = (projectRoot: string) => {
+  return {
+    specs: [],
+    cypressConfig: {
+      projectRoot,
+    },
+    devServerEvents: new EventEmitter(),
+    onConfigNotFound: () => {},
+    framework: 'react',
+    viteConfig: {},
+  } as unknown as ViteDevServerConfig
+}
+
+describe('resolveConfig', function () {
+  this.timeout(1000 * 60)
+
+  context('inspect plugin', () => {
+    it('should not include inspect plugin by default', async () => {
+      const projectRoot = await scaffoldSystemTestProject('vite-inspect')
+      const viteDevServerConfig = getViteDevServerConfig(projectRoot)
+
+      const viteConfig = await createViteDevServerConfig(viteDevServerConfig, vite)
+
+      expect(viteConfig.plugins).to.have.lengthOf(1)
+      expect(viteConfig.plugins[0].name).to.equal('cypress:main')
+    })
+
+    context('with CYPRESS_INTERNAL_VITE_INSPECT provided', () => {
+      before(() => {
+        process.env.CYPRESS_INTERNAL_VITE_INSPECT = 'true'
+      })
+
+      after(() => {
+        process.env.CYPRESS_INTERNAL_VITE_INSPECT = undefined
+      })
+
+      it('should add inspect plugin', async () => {
+        const projectRoot = await scaffoldSystemTestProject('vite-inspect')
+        const viteDevServerConfig = getViteDevServerConfig(projectRoot)
+
+        const viteConfig = await createViteDevServerConfig(viteDevServerConfig, vite)
+
+        expect(viteConfig.plugins).to.have.lengthOf(2)
+        expect(viteConfig.plugins[1].name).to.equal('cypress:inspect')
+      })
+
+      it('should not add inspect plugin if not installed', async () => {
+        const projectRoot = await scaffoldSystemTestProject('vite2.9.1-react')
+        const viteDevServerConfig = getViteDevServerConfig(projectRoot)
+
+        const viteConfig = await createViteDevServerConfig(viteDevServerConfig, vite)
+
+        expect(viteConfig.plugins).to.have.lengthOf(1)
+        expect(viteConfig.plugins[0].name).to.equal('cypress:main')
+      })
+    })
+  })
+})

npm/vite-dev-server/test/test-helpers/scaffoldProject.ts

@@ -0,0 +1,12 @@
+import Fixtures, { ProjectFixtureDir } from '@tooling/system-tests'
+import * as FixturesScaffold from '@tooling/system-tests/lib/dep-installer'
+
+export async function scaffoldSystemTestProject (project: ProjectFixtureDir) {
+  Fixtures.removeProject(project)
+
+  await Fixtures.scaffoldProject(project)
+
+  await FixturesScaffold.scaffoldProjectNodeModules(project)
+
+  return Fixtures.projectPath(project)
+}

system-tests/projects/vite-inspect/package.json

@@ -0,0 +1,8 @@
+{
+  "devDependencies": {
+    "react": "^17.0.0",
+    "vite": "2.9.1",
+    "vite-plugin-inspect": "0.5.0"
+  },
+  "projectFixtureDirectory": "react"
+}