fix: windows CI with Vite 3

circle.yml

@@ -36,7 +36,6 @@ macWorkflowFilters: &darwin-workflow-filters
   when:
     or:
     - equal: [ develop, << pipeline.git.branch >> ]
-    - equal: [ 'revert-22742', << pipeline.git.branch >> ]
     - matches:
           pattern: "-release$"
           value: << pipeline.git.branch >>
@@ -45,7 +44,6 @@ linuxArm64WorkflowFilters: &linux-arm64-workflow-filters
   when:
     or:
     - equal: [ develop, << pipeline.git.branch >> ]
-    - equal: [ 'revert-22742', << pipeline.git.branch >> ]
     - matches:
           pattern: "-release$"
           value: << pipeline.git.branch >>
@@ -65,7 +63,7 @@ windowsWorkflowFilters: &windows-workflow-filters
     or:
     - equal: [ develop, << pipeline.git.branch >> ]
     - equal: [ linux-arm64, << pipeline.git.branch >> ]
-    - equal: [ 'fix-system-test-glob-pattern', << pipeline.git.branch >> ]
+    - equal: [ 'lmiller/windows-vite-fix', << pipeline.git.branch >> ]
     - matches:
           pattern: "-release$"
           value: << pipeline.git.branch >>
@@ -129,7 +127,7 @@ commands:
       - run:
           name: Check current branch to persist artifacts
           command: |
-            if [[ "$CIRCLE_BRANCH" != "develop" && "$CIRCLE_BRANCH" != "revert-22742" ]]; then
+            if [[ "$CIRCLE_BRANCH" != "develop" ]]; then
               echo "Not uploading artifacts or posting install comment for this branch."
               circleci-agent step halt
             fi

packages/app/cypress/e2e/specs.cy.ts

@@ -711,8 +711,8 @@ describe('App: Specs', () => {
         })
 
         // Timeout is increased here to allow ample time for the config change to be processed
-        cy.contains('No Specs Found', { timeout: 10000 }).should('be.visible')
-        cy.findByRole('button', { name: 'New Spec' }).click()
+        cy.contains('No Specs Found', { timeout: 12000 }).should('be.visible')
+        cy.findByRole('button', { name: 'New Spec' }).click({ timeout: 12000 })
 
         cy.findByRole('dialog', {
           name: 'Enter the path for your new spec',

packages/data-context/src/actions/ProjectActions.ts

@@ -444,7 +444,7 @@ export class ProjectActions {
   async reconfigureProject () {
     await this.ctx.actions.browser.closeBrowser()
     this.ctx.actions.wizard.resetWizard()
-    this.ctx.actions.wizard.initialize()
+    await this.ctx.actions.wizard.initialize()
     this.ctx.actions.electron.refreshBrowserWindow()
     this.ctx.actions.electron.showBrowserWindow()
   }

packages/data-context/src/actions/WizardActions.ts

@@ -80,14 +80,14 @@ export class WizardActions {
     return this.ctx.coreData.wizard
   }
 
-  initialize () {
+  async initialize () {
     if (!this.ctx.currentProject) {
       return
     }
 
     this.resetWizard()
 
-    const detected = detectFramework(this.ctx.currentProject)
+    const detected = await detectFramework(this.ctx.currentProject)
 
     debug('detected %o', detected)
 

packages/data-context/src/data/ProjectConfigManager.ts

@@ -11,7 +11,7 @@ import { CypressEnv } from './CypressEnv'
 import { autoBindDebug } from '../util/autoBindDebug'
 import type { EventRegistrar } from './EventRegistrar'
 import type { DataContext } from '../DataContext'
-import { DependencyToInstall, inPkgJson, WIZARD_BUNDLERS, WIZARD_DEPENDENCIES, WIZARD_FRAMEWORKS } from '@packages/scaffold-config'
+import { DependencyToInstall, isDependencyInstalled, WIZARD_BUNDLERS, WIZARD_DEPENDENCIES, WIZARD_FRAMEWORKS } from '@packages/scaffold-config'
 
 const debug = debugLib(`cypress:lifecycle:ProjectConfigManager`)
 
@@ -155,16 +155,16 @@ export class ProjectConfigManager {
       this.options.refreshLifecycle().catch(this.onLoadError)
     } else if (this._eventsIpc && !this._registeredEventsTarget && this._cachedLoadConfig) {
       this.setupNodeEvents(this._cachedLoadConfig)
-      .then(() => {
+      .then(async () => {
         if (this._testingType === 'component') {
-          this.checkDependenciesForComponentTesting()
+          await this.checkDependenciesForComponentTesting()
         }
       })
       .catch(this.onLoadError)
     }
   }
 
-  checkDependenciesForComponentTesting () {
+  async checkDependenciesForComponentTesting () {
     // if it's a function, for example, the user is created their own dev server,
     // and not using one of our presets. Assume they know what they are doing and
     // what dependencies they require.
@@ -184,15 +184,15 @@ export class ProjectConfigManager {
       return
     }
 
-    const result = inPkgJson(bundler, this.options.projectRoot)
+    const result = await isDependencyInstalled(bundler, this.options.projectRoot)
 
     if (!result.satisfied) {
       unsupportedDeps.set(result.dependency.type, result)
     }
 
-    const isFrameworkSatisfied = (bundler: typeof WIZARD_BUNDLERS[number], framework: typeof WIZARD_FRAMEWORKS[number]) => {
-      for (const dep of framework.dependencies(bundler.type, this.options.projectRoot)) {
-        const res = inPkgJson(dep.dependency, this.options.projectRoot)
+    const isFrameworkSatisfied = async (bundler: typeof WIZARD_BUNDLERS[number], framework: typeof WIZARD_FRAMEWORKS[number]) => {
+      for (const dep of await (framework.dependencies(bundler.type, this.options.projectRoot))) {
+        const res = await isDependencyInstalled(dep.dependency, this.options.projectRoot)
 
         if (!res.satisfied) {
           return false
@@ -209,11 +209,11 @@ export class ProjectConfigManager {
     let isSatisfied = false
 
     for (const framework of frameworks) {
-      if (isFrameworkSatisfied(bundler, framework)) {
+      if (await isFrameworkSatisfied(bundler, framework)) {
         isSatisfied = true
         break
       } else {
-        for (const dep of framework.dependencies(bundler.type, this.options.projectRoot)) {
+        for (const dep of await framework.dependencies(bundler.type, this.options.projectRoot)) {
           mismatchedFrameworkDeps.set(dep.dependency.type, dep)
         }
       }

packages/data-context/src/sources/WizardDataSource.ts

@@ -1,42 +1,42 @@
 import {
   WIZARD_DEPENDENCY_TYPESCRIPT,
   DependencyToInstall,
-  inPkgJson,
+  isDependencyInstalled,
 } from '@packages/scaffold-config'
 import type { DataContext } from '..'
 
 export class WizardDataSource {
   constructor (private ctx: DataContext) {}
 
-  packagesToInstall (): DependencyToInstall[] {
+  async packagesToInstall (): Promise<DependencyToInstall[]> {
     if (!this.ctx.coreData.wizard.chosenFramework || !this.ctx.coreData.wizard.chosenBundler || !this.ctx.currentProject) {
       return []
     }
 
     const packages: DependencyToInstall[] = [
-      ...this.ctx.coreData.wizard.chosenFramework.dependencies(
+      ...(await this.ctx.coreData.wizard.chosenFramework.dependencies(
         this.ctx.coreData.wizard.chosenBundler.type, this.ctx.currentProject,
-      ),
+      )),
     ]
 
     if (this.ctx.lifecycleManager.metaState.isUsingTypeScript) {
       packages.push({
-        ...inPkgJson(WIZARD_DEPENDENCY_TYPESCRIPT, this.ctx.currentProject),
+        ...await (isDependencyInstalled(WIZARD_DEPENDENCY_TYPESCRIPT, this.ctx.currentProject)),
         dependency: WIZARD_DEPENDENCY_TYPESCRIPT,
       })
     }
 
     return packages
   }
 
-  installDependenciesCommand () {
+  async installDependenciesCommand () {
     const commands = {
       'npm': 'npm install -D',
       'pnpm': 'pnpm install -D',
       'yarn': 'yarn add -D',
     } as const
 
-    const deps = this.ctx.wizard.packagesToInstall()
+    const deps = (await this.ctx.wizard.packagesToInstall())
     .filter((pack) => !pack.satisfied)
     .map((pack) => pack.dependency.installer)
     .join(' ')

packages/data-context/test/unit/sources/WizardDataSource.spec.ts

@@ -25,7 +25,7 @@ describe('packagesToInstall', () => {
       coreData.wizard.chosenBundler = findBundler('webpack')
     })
 
-    const actual = ctx.wizard.installDependenciesCommand()
+    const actual = await ctx.wizard.installDependenciesCommand()
 
     expect(actual).to.eq(`npm install -D react-scripts webpack react-dom react`)
   })
@@ -41,7 +41,7 @@ describe('packagesToInstall', () => {
       coreData.wizard.chosenBundler = findBundler('webpack')
     })
 
-    const actual = ctx.wizard.installDependenciesCommand()
+    const actual = await ctx.wizard.installDependenciesCommand()
 
     expect(actual).to.eq(`npm install -D @vue/cli-service webpack vue@2`)
   })
@@ -57,7 +57,7 @@ describe('packagesToInstall', () => {
       coreData.wizard.chosenBundler = findBundler('webpack')
     })
 
-    const actual = ctx.wizard.installDependenciesCommand()
+    const actual = await ctx.wizard.installDependenciesCommand()
 
     expect(actual).to.eq(`npm install -D @vue/cli-service webpack vue`)
   })
@@ -73,7 +73,7 @@ describe('packagesToInstall', () => {
       coreData.wizard.chosenBundler = findBundler('webpack')
     })
 
-    const actual = ctx.wizard.installDependenciesCommand()
+    const actual = await ctx.wizard.installDependenciesCommand()
 
     expect(actual).to.eq(`npm install -D @vue/cli-service webpack vue`)
   })
@@ -89,7 +89,7 @@ describe('packagesToInstall', () => {
       coreData.wizard.chosenBundler = findBundler('vite')
     })
 
-    const actual = ctx.wizard.installDependenciesCommand()
+    const actual = await ctx.wizard.installDependenciesCommand()
 
     expect(actual).to.eq(`npm install -D vite react react-dom`)
   })
@@ -105,7 +105,7 @@ describe('packagesToInstall', () => {
       coreData.wizard.chosenBundler = findBundler('vite')
     })
 
-    const actual = ctx.wizard.installDependenciesCommand()
+    const actual = await ctx.wizard.installDependenciesCommand()
 
     expect(actual).to.eq(`npm install -D vite vue`)
   })
@@ -121,7 +121,7 @@ describe('packagesToInstall', () => {
       coreData.wizard.chosenBundler = findBundler('webpack')
     })
 
-    const actual = ctx.wizard.installDependenciesCommand()
+    const actual = await ctx.wizard.installDependenciesCommand()
 
     expect(actual).to.eq(`npm install -D next react react-dom`)
   })
@@ -137,7 +137,7 @@ describe('packagesToInstall', () => {
       coreData.wizard.chosenBundler = findBundler('webpack')
     })
 
-    const actual = ctx.wizard.installDependenciesCommand()
+    const actual = await ctx.wizard.installDependenciesCommand()
 
     expect(actual).to.eq('npm install -D nuxt@2 vue@2')
   })
@@ -153,7 +153,7 @@ describe('packagesToInstall', () => {
       coreData.wizard.chosenBundler = null
     })
 
-    const actual = ctx.wizard.installDependenciesCommand()
+    const actual = await ctx.wizard.installDependenciesCommand()
 
     expect(actual).to.eq('')
   })

packages/graphql/src/schemaTypes/objectTypes/gql-Mutation.ts

@@ -176,7 +176,7 @@ export const mutation = mutationType({
         if (ctx.coreData.currentTestingType && !ctx.lifecycleManager.isTestingTypeConfigured(ctx.coreData.currentTestingType)) {
           // Component Testing has a wizard to help users configure their project
           if (ctx.coreData.currentTestingType === 'component') {
-            ctx.actions.wizard.initialize()
+            await ctx.actions.wizard.initialize()
           } else {
             // E2E doesn't have such a wizard, we just create/update their cypress.config.js.
             await ctx.actions.wizard.scaffoldTestingType()

packages/graphql/src/schemaTypes/objectTypes/gql-Wizard.ts

@@ -33,8 +33,8 @@ export const Wizard = objectType({
     t.nonNull.list.nonNull.field('packagesToInstall', {
       type: WizardNpmPackage,
       description: 'A list of packages to install, null if we have not chosen both a framework and bundler',
-      resolve: (source, args, ctx) => {
-        return ctx.wizard.packagesToInstall().map((pkg) => {
+      resolve: async (source, args, ctx) => {
+        return (await ctx.wizard.packagesToInstall()).map((pkg) => {
           return {
             name: pkg.dependency.name,
             package: pkg.dependency.package,

packages/launchpad/cypress/e2e/config-warning.cy.ts

@@ -122,7 +122,7 @@ describe('component testing dependency warnings', () => {
     cy.get('[data-cy="warning-alert"]').should('not.exist')
     cy.get('a').contains('Projects').click()
     cy.get('[data-cy-testingtype="component"]').click()
-    cy.get('[data-cy="warning-alert"]').should('exist')
+    cy.get('[data-cy="warning-alert"]', { timeout: 12000 }).should('exist')
     .should('contain.text', 'Warning: Component Testing Mismatched Dependencies')
     .should('contain.text', 'vite. Expected ^=2.0.0 || ^=3.0.0, found 2.0.0-beta.70')
     .should('contain.text', 'react. Expected ^=16.0.0 || ^=17.0.0 || ^=18.0.0, found 15.6.2.')
@@ -140,7 +140,7 @@ describe('component testing dependency warnings', () => {
     cy.get('[data-cy="warning-alert"]').should('not.exist')
     cy.get('a').contains('Projects').click()
     cy.get('[data-cy-testingtype="component"]').click()
-    cy.get('[data-cy="warning-alert"]').should('exist')
+    cy.get('[data-cy="warning-alert"]', { timeout: 12000 }).should('exist')
     .should('contain.text', 'Warning: Component Testing Mismatched Dependencies')
     .should('contain.text', '@vue/cli-service. Expected ^=4.0.0 || ^=5.0.0, found 3.12.1.')
     .should('contain.text', 'vue. Expected ^3.0.0, found 2.7.8.')
@@ -159,7 +159,7 @@ describe('component testing dependency warnings', () => {
     cy.get('[data-cy-testingtype="component"]').click()
 
     // Wait until launch browser screen and assert warning does not exist
-    cy.contains('Choose a Browser')
+    cy.contains('Choose a Browser', { timeout: 12000 })
     cy.get('[data-cy="warning-alert"]').should('not.exist')
   })
 })

packages/scaffold-config/src/detect.ts

@@ -1,4 +1,4 @@
-import { WIZARD_FRAMEWORKS, inPkgJson, WizardFrontendFramework, WizardBundler } from './frameworks'
+import { WIZARD_FRAMEWORKS, isDependencyInstalled, WizardFrontendFramework, WizardBundler } from './frameworks'
 import { WIZARD_BUNDLERS } from './dependencies'
 import path from 'path'
 import fs from 'fs'
@@ -13,19 +13,29 @@ interface DetectFramework {
   bundler?: WizardBundler
 }
 
+export async function areAllDepsSatisified (projectPath: string, framework: typeof WIZARD_FRAMEWORKS[number]) {
+  for (const dep of framework.detectors) {
+    const result = await isDependencyInstalled(dep, projectPath)
+
+    if (!result.satisfied) {
+      return false
+    }
+  }
+
+  return true
+}
+
 // Detect the framework, which can either be a tool like Create React App,
 // in which case we just return the framework. The user cannot change the
 // bundler.
 
 // If we don't find a specific framework, but we do find a library and/or
 // bundler, we return both the framework, which might just be "React",
 // and the bundler, which could be Vite.
-export function detectFramework (projectPath: string): DetectFramework {
+export async function detectFramework (projectPath: string): Promise<DetectFramework> {
   // first see if it's a template
   for (const framework of WIZARD_FRAMEWORKS.filter((x) => x.category === 'template')) {
-    const hasAllDeps = [...framework.detectors].every((dep) => {
-      return inPkgJson(dep, projectPath).satisfied
-    })
+    const hasAllDeps = await areAllDepsSatisified(projectPath, framework)
 
     // so far all the templates we support only have 1 bundler,
     // for example CRA only works with webpack,
@@ -44,10 +54,10 @@ export function detectFramework (projectPath: string): DetectFramework {
   for (const library of WIZARD_FRAMEWORKS.filter((x) => x.category === 'library')) {
     // multiple bundlers supported, eg React works with webpack and Vite.
     // try to infer which one they are using.
-    const hasLibrary = [...library.detectors].every((dep) => inPkgJson(dep, projectPath).satisfied)
+    const hasLibrary = await areAllDepsSatisified(projectPath, library)
 
     for (const bundler of WIZARD_BUNDLERS) {
-      const detectBundler = inPkgJson(bundler, projectPath)
+      const detectBundler = await isDependencyInstalled(bundler, projectPath)
 
       if (hasLibrary && detectBundler.satisfied) {
         return {