Merge branch 'develop' into ignore-chrom-prefs

.circleci/cache-version.txt

@@ -1,3 +1,3 @@
 # Bump this version to force CI to re-create the cache from scratch.
 
-05-09-24
+05-23-24

.circleci/workflows.yml

@@ -76,7 +76,7 @@ windowsWorkflowFilters: &windows-workflow-filters
     - equal: [ develop, << pipeline.git.branch >> ]
     # use the following branch as well to ensure that v8 snapshot cache updates are fully tested
     - equal: [ 'update-v8-snapshot-cache-on-develop', << pipeline.git.branch >> ]
-    - equal: [ 'chore/fix_illegal_characters_in_windows', << pipeline.git.branch >> ]
+    - equal: [ 'feat/support_next_14', << pipeline.git.branch >> ]
     - matches:
         pattern: /^release\/\d+\.\d+\.\d+$/
         value: << pipeline.git.branch >>

CONTRIBUTING.md

@@ -359,7 +359,7 @@ Many Cypress packages print out debugging information to console via the `debug`
 ### Coding Style
 
 We use [eslint](https://eslint.org/) to lint all JavaScript code and follow rules specified in
-[@cypress/eslint-plugin-dev](./npm/eslint-plugin-cypress) plugin.
+[@cypress/eslint-plugin-dev](./npm/eslint-plugin-dev) plugin.
 
 This project uses a Git pre-commit hook to lint staged files before committing. See the [`lint-staged` project](https://github.com/okonet/lint-staged) for details.
 `lint-staged` will try to auto-fix any lint errors with `eslint --fix`, so if it fails, you must manually fix the lint errors before committing.

__snapshots__/questions-remain-spec.js

@@ -0,0 +1,9 @@
+exports['questions-remain returns object if all questions have been answered 1'] = {
+  'foo': 'foo is specified',
+  'bar': 'so is bar',
+}
+
+exports['questions-remain asks questions for missing options 1'] = {
+  'foo': 'foo is specified',
+  'bar': 'bar user answer',
+}

browser-versions.json

@@ -1,5 +1,5 @@
 {
-  "chrome:beta": "126.0.6478.7",
-  "chrome:stable": "125.0.6422.60",
+  "chrome:beta": "126.0.6478.17",
+  "chrome:stable": "125.0.6422.112",
   "chrome:minimum": "64.0.3282.0"
 }

cli/CHANGELOG.md

@@ -1,7 +1,11 @@
 <!-- See the ../guides/writing-the-cypress-changelog.md for details on writing the changelog. -->
 ## 13.11.0
 
-_Released 5/28/2024 (PENDING)_
+_Released 6/4/2024 (PENDING)_
+
+**Features:**
+
+- Added support for [Next.js 14](https://nextjs.org/blog/next-14) for component testing. Addresses [#28185](https://github.com/cypress-io/cypress/issues/28185).
 
 **Features:**
 

npm/vite-dev-server/package.json

@@ -27,7 +27,7 @@
     "mocha": "^9.2.2",
     "sinon": "^13.0.1",
     "ts-node": "^10.9.2",
-    "vite-4": "npm:vite@^4.5.2",
+    "vite-4": "npm:vite@^4.5.3",
     "vite-5": "npm:vite@^5.2.8",
     "vite-plugin-inspect": "0.8.4"
   },

npm/webpack-dev-server/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [@cypress/webpack-dev-server-v3.9.0](https://github.com/cypress-io/cypress/compare/@cypress/webpack-dev-server-v3.8.0...@cypress/webpack-dev-server-v3.9.0) (2024-05-30)
+
+
+### Features
+
+* support Next.JS version 14 ([#29558](https://github.com/cypress-io/cypress/issues/29558)) ([cf6b29d](https://github.com/cypress-io/cypress/commit/cf6b29db229cc825f27fd78e7baeafaa16576f9a))
+
 # [@cypress/webpack-dev-server-v3.8.0](https://github.com/cypress-io/cypress/compare/@cypress/webpack-dev-server-v3.7.4...@cypress/webpack-dev-server-v3.8.0) (2024-04-18)
 
 

npm/webpack-dev-server/cypress/e2e/next.cy.ts

@@ -1,8 +1,7 @@
 /// <reference path="../support/e2e.ts" />
 import type { ProjectFixtureDir } from '@tooling/system-tests/lib/fixtureDirs'
 
-const WEBPACK_REACT: ProjectFixtureDir[] = ['next-12', 'next-12.1.6', 'next-13', 'next-13-tsconfig']
-
+const WEBPACK_REACT: ProjectFixtureDir[] = ['next-12', 'next-12.1.6', 'next-13', 'next-13-tsconfig', 'next-14']
 // Add to this list to focus on a particular permutation
 const ONLY_PROJECTS: ProjectFixtureDir[] = []
 
@@ -106,3 +105,100 @@ for (const project of WEBPACK_REACT) {
     })
   })
 }
+
+// Since next-14-tsconfig-tailwind does not use the fixture directory we need to write our own test suite
+// We want to specifically test typescript files with next-14 as there have been known problems with
+// module: bundler and cypress compatibility
+describe(`Working with next-14-tsconfig-tailwind`, () => {
+  beforeEach(() => {
+    cy.scaffoldProject('next-14-tsconfig-tailwind')
+    cy.openProject('next-14-tsconfig-tailwind', ['--component'])
+    cy.startAppServer('component')
+  })
+
+  it('should mount a passing test', () => {
+    cy.visitApp()
+    cy.specsPageIsVisible()
+    cy.contains('page.cy.tsx').click()
+    cy.waitForSpecToFinish({ passCount: 1 })
+  })
+
+  it('should live-reload on src changes', () => {
+    cy.visitApp()
+    cy.specsPageIsVisible()
+
+    cy.contains('page.cy.tsx').click()
+    cy.waitForSpecToFinish({ passCount: 1 })
+
+    cy.withCtx(async (ctx) => {
+      const indexPath = ctx.path.join('app', 'page.tsx')
+
+      await ctx.actions.file.writeFileInProject(
+        indexPath,
+        (await ctx.file.readFileInProject(indexPath)).replace('Welcome to', 'Hello from'),
+      )
+    })
+
+    cy.waitForSpecToFinish({ failCount: 1 })
+    cy.get('.test-err-code-frame').should('be.visible')
+
+    cy.withCtx(async (ctx) => {
+      const indexTestPath = ctx.path.join('app', 'page.cy.tsx')
+
+      await ctx.actions.file.writeFileInProject(
+        indexTestPath,
+        (await ctx.file.readFileInProject(indexTestPath)).replace('Welcome to', 'Hello from'),
+      )
+    })
+
+    cy.waitForSpecToFinish({ passCount: 1 })
+  })
+
+  it('should show compilation errors on src changes', () => {
+    cy.visitApp()
+    cy.specsPageIsVisible()
+
+    cy.contains('page.cy.tsx').click()
+    cy.waitForSpecToFinish({ passCount: 1 })
+
+    // Create compilation error
+    cy.withCtx(async (ctx) => {
+      const indexPath = ctx.path.join('app', 'page.tsx')
+
+      await ctx.actions.file.writeFileInProject(
+        indexPath,
+        (await ctx.file.readFileInProject(indexPath)).replace('export', 'expart'),
+      )
+    })
+
+    // The test should fail and the stack trace should appear in the command log
+    cy.waitForSpecToFinish({ failCount: 1 })
+    cy.contains('The following error originated from your test code, not from Cypress.').should('exist')
+  })
+
+  it('should detect new spec', { retries: 15 }, () => {
+    cy.visitApp()
+    cy.specsPageIsVisible()
+
+    cy.withCtx(async (ctx) => {
+      const newTestPath = ctx.path.join('app', 'New.cy.tsx')
+      const indexTestPath = ctx.path.join('app', 'page.cy.tsx')
+
+      await ctx.actions.file.writeFileInProject(
+        newTestPath,
+        await ctx.file.readFileInProject(indexTestPath),
+      )
+    })
+
+    cy.contains('New.cy.tsx').click()
+    cy.waitForSpecToFinish({ passCount: 1 })
+  })
+
+  // Make sure tailwind styles are appearing in the test.
+  it('should allow import of global styles in support file', { retries: 15 }, () => {
+    cy.visitApp()
+    cy.specsPageIsVisible()
+    cy.contains('page-styles.cy.tsx').click()
+    cy.waitForSpecToFinish({ passCount: 1 })
+  })
+})

npm/webpack-dev-server/src/helpers/sourceRelativeWebpackModules.ts

@@ -222,7 +222,7 @@ export function sourceWebpackDevServer (config: WebpackDevServerConfig, webpackM
 
     throw new CypressWebpackDevServerError(
       `Incompatible major versions of webpack and webpack-dev-server!
-      webpack-dev-server major version ${webpackDevServer.majorVersion} only works with major versions of webpack ${webpackMajorVersion} - saw webpack-dev-server version ${json.version}.
+      webpack-dev-server major version ${webpackDevServer.majorVersion} only works with major versions of webpack 5 - saw webpack-dev-server version ${json.version}.
       If using webpack major version 4, please install webpack-dev-server version 4 to be used with @cypress/webpack-dev-server or upgrade to webpack 5.`,
     )
   }

npm/webpack-dev-server/test/handlers/nextHandler.spec.ts

@@ -7,13 +7,13 @@ import { WebpackDevServerConfig } from '../../src/devServer'
 import '../support'
 
 const expectWatchOverrides = (webpackConfig: Configuration) => {
-  expect(webpackConfig.watchOptions?.ignored).to.contain('**/node_modules/!(@cypress/webpack-dev-server/dist/browser.js)**')
+  expect((webpackConfig.watchOptions?.ignored as RegExp)?.test('**/node_modules/!(@cypress/webpack-dev-server/dist/browser.js)**')).to.be.true
 }
 
 const expectPagesDir = (webpackConfig: Configuration, projectRoot: string) => {
   const ReactLoadablePlugin: any = webpackConfig.plugins?.find((plugin) => plugin.constructor.name === 'ReactLoadablePlugin')
 
-  expect(ReactLoadablePlugin.pagesDir).eq(path.join(projectRoot, 'pages'))
+  expect(ReactLoadablePlugin.pagesOrAppDir).eq(path.join(projectRoot, 'pages'))
 }
 
 const expectWebpackSpan = (webpackConfig: Configuration) => {
@@ -54,8 +54,8 @@ describe('nextHandler', function () {
   // can take a while since we install node_modules
   this.timeout(1000 * 60)
 
-  it('sources from a next-12 project', async () => {
-    const projectRoot = await scaffoldMigrationProject('next-12')
+  it('sources from a next-14 project', async () => {
+    const projectRoot = await scaffoldMigrationProject('next-14')
 
     process.chdir(projectRoot)
 
@@ -75,7 +75,7 @@ describe('nextHandler', function () {
   })
 
   it('throws if nodeVersion is set to bundled', async () => {
-    const projectRoot = await scaffoldMigrationProject('next-12')
+    const projectRoot = await scaffoldMigrationProject('next-14')
 
     process.chdir(projectRoot)
 

package.json

@@ -74,7 +74,6 @@
     "@aws-sdk/client-s3": "3.485.0",
     "@aws-sdk/credential-providers": "3.53.0",
     "@babel/eslint-parser": "7.24.1",
-    "@cypress/questions-remain": "1.0.1",
     "@cypress/request": "^3.0.0",
     "@cypress/request-promise": "^5.0.0",
     "@electron/fuses": "1.6.1",
@@ -197,7 +196,7 @@
     "semver": "7.5.3",
     "shelljs": "0.8.5",
     "sinon": "7.3.2",
-    "snap-shot-it": "7.9.3",
+    "snap-shot-it": "7.9.10",
     "stop-only": "3.0.1",
     "strip-ansi": "6.0.0",
     "tar": "6.1.15",

packages/app/cypress/e2e/runner/ct-framework-errors.cy.ts

@@ -136,12 +136,12 @@ describe('Next.js', {
   numTestsKeptInMemory: 1,
 }, () => {
   beforeEach(() => {
-    cy.scaffoldProject('next-12')
+    cy.scaffoldProject('next-14')
   })
 
   it('error conditions', () => {
     const verify = loadErrorSpec({
-      projectName: 'next-12',
+      projectName: 'next-14',
       configFile: 'cypress.config.js',
       filePath: 'cypress/Errors.cy.jsx',
       failCount: 4,

packages/data-context/package.json

@@ -42,7 +42,7 @@
     "isbinaryfile": "^4.0.8",
     "launch-editor": "2.2.1",
     "lodash": "4.17.21",
-    "micromatch": "4.0.4",
+    "micromatch": "4.0.6",
     "node-machine-id": "1.1.12",
     "p-defer": "^3.0.0",
     "parse-glob": "3.0.4",

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

@@ -258,8 +258,8 @@ describe('component testing dependency warnings', () => {
   })
 
   it('does not show warning for project that does not require bundler to be installed', () => {
-    cy.scaffoldProject('next-12')
-    cy.openProject('next-12', ['--component'])
+    cy.scaffoldProject('next-14')
+    cy.openProject('next-14', ['--component'])
     cy.visitLaunchpad()
     cy.skipWelcome()
     cy.get('[data-cy="warning-alert"]').should('not.exist')

packages/scaffold-config/src/dependencies.ts

@@ -94,7 +94,7 @@ export const WIZARD_DEPENDENCY_NEXT = {
   package: 'next',
   installer: 'next',
   description: 'The React Framework for Production',
-  minVersion: '^10.0.0 || ^11.0.0 || ^12.0.0 || ^13.0.0',
+  minVersion: '^10.0.0 || ^11.0.0 || ^12.0.0 || ^13.0.0 || ^14.0.0',
 } as const
 
 export const WIZARD_DEPENDENCY_ANGULAR_CLI = {

packages/scaffold-config/test/unit/detect.spec.ts

@@ -191,7 +191,7 @@ describe('detectFramework', () => {
     expect(actual.bundler).to.eq('vite')
   })
 
-  ;['10.0.0', '11.0.0', '12.0.0'].forEach((v) => {
+  ;['10.0.0', '11.0.0', '12.0.0', '13.0.0', '14.0.0'].forEach((v) => {
     it(`Next.js v${v}`, async () => {
       const projectPath = await scaffoldMigrationProject('nextjs-unconfigured')
 

scripts/binary/index.js

@@ -11,14 +11,14 @@ const minimist = require('minimist')
 const la = require('lazy-ass')
 const check = require('check-more-types')
 const debug = require('debug')('cypress:binary')
-const questionsRemain = require('@cypress/questions-remain')
 const rp = require('@cypress/request-promise')
 
 const zip = require('./zip')
 const ask = require('./ask')
 const meta = require('./meta')
 const build = require('./build')
 const upload = require('./upload')
+const questionsRemain = require('./util/questions-remain')
 const uploadUtils = require('./util/upload')
 const { uploadArtifactToS3 } = require('./upload-build-artifact')
 const { moveBinaries } = require('./move-binaries')

scripts/binary/util/questions-remain.js

@@ -0,0 +1,39 @@
+const la = require('lazy-ass')
+const is = require('check-more-types')
+const bluebird = require('bluebird')
+
+// goes through the list of properties and asks relevant question
+// resolves with all relevant options set
+// if the property already exists, skips the question
+function askMissingOptions (propertiesToQuestions) {
+  la(is.object(propertiesToQuestions), 'expected object property:question')
+
+  // options are collected from the CLI
+  return (options = {}) => {
+    const reducer = (memo, property) => {
+      if (is.has(memo, property)) {
+        return memo
+      }
+
+      const question = propertiesToQuestions[property]
+
+      if (!is.fn(question)) {
+        return memo
+      }
+
+      la(is.fn(question), 'cannot find question for property', property)
+
+      return question(memo[property]).then((answer) => {
+        memo[property] = answer
+
+        return memo
+      })
+    }
+
+    const properties = Object.keys(propertiesToQuestions)
+
+    return bluebird.reduce(properties, reducer, options)
+  }
+}
+
+module.exports = askMissingOptions