feat: CT stack traces (#23916)

Co-authored-by: Zachary Williams <[email protected]>
Co-authored-by: astone123 <[email protected]>
Co-authored-by: Lachlan Miller <[email protected]>

Author: 4 people

.circleci/config.yml

@@ -63,7 +63,7 @@ windowsWorkflowFilters: &windows-workflow-filters
     or:
     - equal: [ develop, << pipeline.git.branch >> ]
     - equal: [ linux-arm64, << pipeline.git.branch >> ]
-    - equal: [ 'lmiller/fixing-windows-ci', << pipeline.git.branch >> ]
+    - equal: [ 'mikep/21720-ct-stack-traces', << pipeline.git.branch >> ]
     - matches:
           pattern: "-release$"
           value: << pipeline.git.branch >>

npm/vite-dev-server/client/initCypressTests.js

@@ -24,12 +24,22 @@ if (supportFile) {
 
   // We need a slash before /cypress/supportFile.js, this happens by default
   // with the current string replacement logic.
-  importsToLoad.push(() => import(`${devServerPublicPathRoute}${supportRelativeToProjectRoot}`))
+  importsToLoad.push({
+    load: () => import(`${devServerPublicPathRoute}${supportRelativeToProjectRoot}`),
+    absolute: supportFile,
+    relative: supportRelativeToProjectRoot,
+    relativeUrl: `${devServerPublicPathRoute}${supportRelativeToProjectRoot}`,
+  })
 }
 
 /* Spec file import logic */
 // We need a slash before /src/my-spec.js, this does not happen by default.
-importsToLoad.push(() => import(`${devServerPublicPathRoute}/${CypressInstance.spec.relative}`))
+importsToLoad.push({
+  load: () => import(`${devServerPublicPathRoute}/${CypressInstance.spec.relative}`),
+  absolute: CypressInstance.spec.absolute,
+  relative: CypressInstance.spec.relative,
+  relativeUrl: `${devServerPublicPathRoute}/${CypressInstance.spec.relative}`,
+})
 
 if (!CypressInstance) {
   throw new Error('Tests cannot run without a reference to Cypress!')

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

@@ -57,6 +57,7 @@ for (const project of VITE_REACT) {
       cy.contains('MissingReactInSpec.cy.jsx').click()
       cy.waitForSpecToFinish()
       cy.get('.failed > .num').should('contain', 1)
+      cy.get('.test-err-code-frame').should('be.visible')
       cy.withCtx(async (ctx) => {
         await ctx.actions.file.writeFileInProject(`src/MissingReactInSpec.cy.jsx`,
           await ctx.file.readFileInProject('src/App.cy.jsx'))

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

@@ -105,6 +105,27 @@ export const Cypress = (
         return res.end(transformedIndexHtml)
       })
     },
+    transform (code, id, options?) {
+      try {
+        if (/\.js$/i.test(id) && !/\/\/# sourceMappingURL=/i.test(code)) {
+          // The Vite dev server and plugins automatically transpile TS and JSX files, which results in sourcemaps being generated
+          // and included in output. However, Vite serves up `esnext`-compliant Javascript which means many JS files won't be
+          // transpiled and won't supply a sourcemap - this prevents Cypress from providing codeFrames in the event of an error.
+          //
+          // A sourcemap is generated by Vite for JS files (just not included) which is in effect an "identity" sourcemap mapping
+          // 1-to-1 to the output file. We can grab this and pass it along as a sourcemap we want Vite to embed into the output,
+          // giving Cypress a sourcemap to use for codeFrame lookups.
+          // @see https://rollupjs.org/guide/en/#thisgetcombinedsourcemap
+
+          return {
+            code,
+            map: this.getCombinedSourcemap(),
+          }
+        }
+      } catch (_err) {
+        debug('Failed to propagate sourcemap for %s: %o', id, _err)
+      }
+    },
     handleHotUpdate: ({ server, file }) => {
       debug('handleHotUpdate - file', file)
 

npm/webpack-dev-server/__snapshots__/makeWebpackConfig.spec.ts.js

@@ -10,17 +10,18 @@ exports['makeWebpackConfig ignores userland webpack `output.publicPath` and `dev
       "overlay": false
     }
   },
-  "mode": "development",
   "optimization": {
     "emitOnErrors": true,
     "splitChunks": {
       "chunks": "all"
     }
   },
+  "mode": "development",
   "plugins": [
     "HtmlWebpackPlugin",
     "CypressCTWebpackPlugin"
-  ]
+  ],
+  "devtool": "inline-source-map"
 }
 
 exports['makeWebpackConfig ignores userland webpack `output.publicPath` and `devServer.overlay` with webpack-dev-server v3 1'] = {
@@ -32,15 +33,16 @@ exports['makeWebpackConfig ignores userland webpack `output.publicPath` and `dev
     "progress": true,
     "overlay": false
   },
-  "mode": "development",
   "optimization": {
     "noEmitOnErrors": false,
     "splitChunks": {
       "chunks": "all"
     }
   },
+  "mode": "development",
   "plugins": [
     "HtmlWebpackPlugin",
     "CypressCTWebpackPlugin"
-  ]
+  ],
+  "devtool": "inline-source-map"
 }

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

@@ -73,6 +73,7 @@ for (const project of WEBPACK_REACT) {
       // 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')
+      cy.get('.test-err-code-frame').should('be.visible')
     })
 
     // TODO: fix flaky test https://github.com/cypress-io/cypress/issues/23455

npm/webpack-dev-server/cypress/e2e/create-react-app.cy.ts

@@ -38,6 +38,7 @@ for (const project of WEBPACK_REACT) {
       })
 
       cy.waitForSpecToFinish({ failCount: 1 })
+      cy.get('.test-err-code-frame').should('be.visible')
 
       cy.withCtx(async (ctx) => {
         await ctx.actions.file.writeFileInProject(

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

@@ -40,6 +40,7 @@ for (const project of WEBPACK_REACT) {
       })
 
       cy.waitForSpecToFinish({ failCount: 1 })
+      cy.get('.test-err-code-frame').should('be.visible')
 
       cy.withCtx(async (ctx) => {
         const indexTestPath = ctx.path.join('pages', 'index.cy.js')

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

@@ -35,6 +35,7 @@ for (const project of PROJECTS) {
       })
 
       cy.waitForSpecToFinish({ failCount: 1 })
+      cy.get('.test-err-code-frame').should('be.visible')
 
       cy.withCtx(async (ctx) => {
         const tutorialCyPath = ctx.path.join('components', 'Tutorial.cy.js')

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

@@ -24,8 +24,7 @@ for (const project of WEBPACK_REACT) {
     it('should mount a passing test', () => {
       cy.visitApp()
       cy.contains('App.cy.jsx').click()
-      cy.waitForSpecToFinish()
-      cy.get('.passed > .num').should('contain', 1)
+      cy.waitForSpecToFinish({ passCount: 1 })
     })
 
     it('MissingReact: should fail, rerun, succeed', () => {
@@ -36,15 +35,15 @@ for (const project of WEBPACK_REACT) {
 
       cy.visitApp()
       cy.contains('MissingReact.cy.jsx').click()
-      cy.waitForSpecToFinish()
-      cy.get('.failed > .num').should('contain', 1)
+      cy.waitForSpecToFinish({ failCount: 1 })
+      cy.get('.test-err-code-frame').should('be.visible')
       cy.withCtx(async (ctx) => {
         await ctx.actions.file.writeFileInProject(`src/MissingReact.jsx`,
         `import React from 'react';
         ${await ctx.file.readFileInProject('src/MissingReact.jsx')}`)
       })
 
-      cy.get('.passed > .num').should('contain', 1)
+      cy.waitForSpecToFinish({ passCount: 1 })
     })
 
     it('MissingReactInSpec: should fail, rerun, succeed', () => {
@@ -55,14 +54,14 @@ for (const project of WEBPACK_REACT) {
 
       cy.visitApp()
       cy.contains('MissingReactInSpec.cy.jsx').click()
-      cy.waitForSpecToFinish()
-      cy.get('.failed > .num').should('contain', 1)
+      cy.waitForSpecToFinish({ failCount: 1 })
+      cy.get('.test-err-code-frame').should('be.visible')
       cy.withCtx(async (ctx) => {
         await ctx.actions.file.writeFileInProject(`src/MissingReactInSpec.cy.jsx`,
           await ctx.file.readFileInProject('src/App.cy.jsx'))
       })
 
-      cy.get('.passed > .num').should('contain', 1)
+      cy.waitForSpecToFinish({ passCount: 1 })
     })
 
     it('AppCompilationError: should fail with uncaught exception error', () => {
@@ -73,8 +72,7 @@ for (const project of WEBPACK_REACT) {
 
       cy.visitApp()
       cy.contains('AppCompilationError.cy.jsx').click()
-      cy.waitForSpecToFinish()
-      cy.get('.failed > .num').should('contain', 1)
+      cy.waitForSpecToFinish({ failCount: 1 })
       cy.contains('An uncaught error was detected outside of a test')
       cy.contains('The following error originated from your test code, not from Cypress.')
 
@@ -86,8 +84,7 @@ for (const project of WEBPACK_REACT) {
         )
       })
 
-      cy.waitForSpecToFinish()
-      cy.get('.passed > .num').should('contain', 1)
+      cy.waitForSpecToFinish({ passCount: 1 })
 
       const appCompilationErrorSpec = dedent`
         import React from 'react'
@@ -109,8 +106,7 @@ for (const project of WEBPACK_REACT) {
         )
       }, { appCompilationErrorSpec })
 
-      cy.waitForSpecToFinish()
-      cy.get('.failed > .num').should('contain', 1)
+      cy.waitForSpecToFinish({ failCount: 1 })
       cy.contains('An uncaught error was detected outside of a test')
       cy.contains('The following error originated from your test code, not from Cypress.')
     })
@@ -121,7 +117,7 @@ for (const project of WEBPACK_REACT) {
 
       // 1. assert spec executes successfully
       cy.contains('App.cy.jsx').click()
-      cy.get('.passed > .num').should('contain', 1)
+      cy.waitForSpecToFinish({ passCount: 1 })
 
       // 2. remove file from file system
       cy.withCtx(async (ctx) => {
@@ -143,7 +139,7 @@ for (const project of WEBPACK_REACT) {
       })
 
       // 5. assert recreated spec executes successfully
-      cy.get('.passed > .num').should('contain', 1)
+      cy.waitForSpecToFinish({ passCount: 1 })
     })
   })
 }