fix: force Webpack to emit assets on error (#23844)

astone123 · ZachJW34 · warrensplayer · web-flow · commit 466be9f1f0cb · 2022-09-16T16:43:07.000-04:00
Co-authored-by: Zachary Williams &lt;ZachJW34@gmail.com&gt;
Co-authored-by: Stokes Player &lt;stokes@cypress.io&gt;
diff --git a/npm/webpack-dev-server/__snapshots__/makeWebpackConfig.spec.ts.js b/npm/webpack-dev-server/__snapshots__/makeWebpackConfig.spec.ts.js
@@ -12,6 +12,7 @@ exports['makeWebpackConfig ignores userland webpack `output.publicPath` and `dev
   },
   "mode": "development",
   "optimization": {
+    "emitOnErrors": true,
     "splitChunks": {
       "chunks": "all"
     }
@@ -33,6 +34,7 @@ exports['makeWebpackConfig ignores userland webpack `output.publicPath` and `dev
   },
   "mode": "development",
   "optimization": {
+    "noEmitOnErrors": false,
     "splitChunks": {
       "chunks": "all"
     }
diff --git a/npm/webpack-dev-server/cypress/e2e/angular.cy.ts b/npm/webpack-dev-server/cypress/e2e/angular.cy.ts
@@ -22,8 +22,8 @@ for (const project of WEBPACK_REACT) {
     it('should mount a passing test', () => {
       cy.visitApp()
       cy.contains('app.component.cy.ts').click()
-      cy.waitForSpecToFinish()
-      cy.get('.passed > .num').should('contain', 1)
+      cy.waitForSpecToFinish({ passCount: 1 })
+
       cy.get('li.command').first().within(() => {
         cy.get('.command-method').should('contain', 'mount')
         cy.get('.command-message').should('contain', 'AppComponent')
@@ -33,8 +33,7 @@ for (const project of WEBPACK_REACT) {
     it('should live-reload on src changes', () => {
       cy.visitApp()
       cy.contains('app.component.cy.ts').click()
-      cy.waitForSpecToFinish()
-      cy.get('.passed > .num').should('contain', 1)
+      cy.waitForSpecToFinish({ passCount: 1 })
 
       cy.withCtx(async (ctx) => {
         await ctx.actions.file.writeFileInProject(
@@ -43,7 +42,7 @@ for (const project of WEBPACK_REACT) {
         )
       })
 
-      cy.get('.failed > .num').should('contain', 1)
+      cy.waitForSpecToFinish({ failCount: 1 })
 
       cy.withCtx(async (ctx) => {
         await ctx.actions.file.writeFileInProject(
@@ -52,7 +51,28 @@ for (const project of WEBPACK_REACT) {
         )
       })
 
-      cy.get('.passed > .num').should('contain', 1)
+      cy.waitForSpecToFinish({ passCount: 1 })
+    })
+
+    it('should show compilation errors on src changes', () => {
+      cy.visitApp()
+
+      cy.contains('app.component.cy.ts').click()
+      cy.waitForSpecToFinish({ passCount: 1 })
+
+      // Create compilation error
+      cy.withCtx(async (ctx) => {
+        const componentFilePath = ctx.path.join('src', 'app', 'app.component.ts')
+
+        await ctx.actions.file.writeFileInProject(
+          componentFilePath,
+          (await ctx.file.readFileInProject(componentFilePath)).replace('class', 'classaaaaa'),
+        )
+      })
+
+      // 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')
     })
 
     // TODO: fix flaky test https://github.com/cypress-io/cypress/issues/23455
@@ -67,8 +87,7 @@ for (const project of WEBPACK_REACT) {
       })
 
       cy.contains('new.component.cy.ts').click()
-      cy.waitForSpecToFinish()
-      cy.get('.passed > .num').should('contain', 1)
+      cy.waitForSpecToFinish({ passCount: 1 })
     })
   })
 }
diff --git a/npm/webpack-dev-server/cypress/e2e/create-react-app.cy.ts b/npm/webpack-dev-server/cypress/e2e/create-react-app.cy.ts
@@ -21,16 +21,14 @@ for (const project of WEBPACK_REACT) {
     it('should mount a passing test', () => {
       cy.visitApp()
       cy.contains('App.cy.js').click()
-      cy.waitForSpecToFinish()
-      cy.get('.passed > .num').should('contain', 1)
+      cy.waitForSpecToFinish({ passCount: 1 })
     })
 
     it('should live-reload on src changes', () => {
       cy.visitApp()
 
       cy.contains('App.cy.js').click()
-      cy.waitForSpecToFinish()
-      cy.get('.passed > .num').should('contain', 1)
+      cy.waitForSpecToFinish({ passCount: 1 })
 
       cy.withCtx(async (ctx) => {
         await ctx.actions.file.writeFileInProject(
@@ -39,7 +37,7 @@ for (const project of WEBPACK_REACT) {
         )
       })
 
-      cy.get('.failed > .num').should('contain', 1)
+      cy.waitForSpecToFinish({ failCount: 1 })
 
       cy.withCtx(async (ctx) => {
         await ctx.actions.file.writeFileInProject(
@@ -48,7 +46,25 @@ for (const project of WEBPACK_REACT) {
         )
       })
 
-      cy.get('.passed > .num').should('contain', 1)
+      cy.waitForSpecToFinish({ passCount: 1 })
+    })
+
+    it('should show compilation errors on src changes', () => {
+      cy.visitApp()
+
+      cy.contains('App.cy.js').click()
+      cy.waitForSpecToFinish({ passCount: 1 })
+
+      cy.withCtx(async (ctx) => {
+        await ctx.actions.file.writeFileInProject(
+          ctx.path.join('src', 'App.js'),
+          (await ctx.file.readFileInProject(ctx.path.join('src', 'App.js'))).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', () => {
@@ -62,8 +78,7 @@ for (const project of WEBPACK_REACT) {
       })
 
       cy.contains('New.cy.js').click()
-      cy.waitForSpecToFinish()
-      cy.get('.passed > .num').should('contain', 1)
+      cy.waitForSpecToFinish({ passCount: 1 })
     })
   })
 }
diff --git a/npm/webpack-dev-server/cypress/e2e/next.cy.ts b/npm/webpack-dev-server/cypress/e2e/next.cy.ts
@@ -21,16 +21,14 @@ for (const project of WEBPACK_REACT) {
     it('should mount a passing test', () => {
       cy.visitApp()
       cy.contains('index.cy.js').click()
-      cy.waitForSpecToFinish()
-      cy.get('.passed > .num').should('contain', 1)
+      cy.waitForSpecToFinish({ passCount: 1 })
     })
 
     it('should live-reload on src changes', () => {
       cy.visitApp()
 
       cy.contains('index.cy.js').click()
-      cy.waitForSpecToFinish()
-      cy.get('.passed > .num').should('contain', 1)
+      cy.waitForSpecToFinish({ passCount: 1 })
 
       cy.withCtx(async (ctx) => {
         const indexPath = ctx.path.join('pages', 'index.js')
@@ -41,7 +39,7 @@ for (const project of WEBPACK_REACT) {
         )
       })
 
-      cy.get('.failed > .num', { timeout: 10000 }).should('contain', 1)
+      cy.waitForSpecToFinish({ failCount: 1 })
 
       cy.withCtx(async (ctx) => {
         const indexTestPath = ctx.path.join('pages', 'index.cy.js')
@@ -52,7 +50,28 @@ for (const project of WEBPACK_REACT) {
         )
       })
 
-      cy.get('.passed > .num').should('contain', 1)
+      cy.waitForSpecToFinish({ passCount: 1 })
+    })
+
+    it('should show compilation errors on src changes', () => {
+      cy.visitApp()
+
+      cy.contains('index.cy.js').click()
+      cy.waitForSpecToFinish({ passCount: 1 })
+
+      // Create compilation error
+      cy.withCtx(async (ctx) => {
+        const indexPath = ctx.path.join('pages', 'index.js')
+
+        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')
     })
 
     // TODO: fix flaky test https://github.com/cypress-io/cypress/issues/23417
@@ -70,16 +89,14 @@ for (const project of WEBPACK_REACT) {
       })
 
       cy.contains('New.cy.js').click()
-      cy.waitForSpecToFinish()
-      cy.get('.passed > .num').should('contain', 1)
+      cy.waitForSpecToFinish({ passCount: 1 })
     })
 
     // TODO: fix flaky test https://github.com/cypress-io/cypress/issues/23417
     it.skip('should allow import of global styles in support file', () => {
       cy.visitApp()
       cy.contains('styles.cy.js').click()
-      cy.waitForSpecToFinish()
-      cy.get('.passed > .num').should('contain', 1)
+      cy.waitForSpecToFinish({ passCount: 1 })
     })
   })
 }
diff --git a/npm/webpack-dev-server/cypress/e2e/nuxt.cy.ts b/npm/webpack-dev-server/cypress/e2e/nuxt.cy.ts
@@ -23,8 +23,7 @@ for (const project of PROJECTS) {
     it('should mount a passing test and live-reload', () => {
       cy.visitApp()
       cy.contains('Tutorial.cy.js').click()
-      cy.waitForSpecToFinish()
-      cy.get('.passed > .num').should('contain', 1)
+      cy.waitForSpecToFinish({ passCount: 1 })
 
       cy.withCtx(async (ctx) => {
         const tutorialVuePath = ctx.path.join('components', 'Tutorial.vue')
@@ -35,7 +34,7 @@ for (const project of PROJECTS) {
         )
       })
 
-      cy.get('.failed > .num').should('contain', 1)
+      cy.waitForSpecToFinish({ failCount: 1 })
 
       cy.withCtx(async (ctx) => {
         const tutorialCyPath = ctx.path.join('components', 'Tutorial.cy.js')
@@ -46,7 +45,28 @@ for (const project of PROJECTS) {
         )
       })
 
-      cy.get('.passed > .num').should('contain', 1)
+      cy.waitForSpecToFinish({ passCount: 1 })
+    })
+
+    it('should show compilation errors on src changes', () => {
+      cy.visitApp()
+
+      cy.contains('Tutorial.cy.js').click()
+      cy.waitForSpecToFinish({ passCount: 1 })
+
+      // Create compilation error
+      cy.withCtx(async (ctx) => {
+        const tutorialVuePath = ctx.path.join('components', 'Tutorial.vue')
+
+        await ctx.actions.file.writeFileInProject(
+          tutorialVuePath,
+          (await ctx.file.readFileInProject(tutorialVuePath)).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')
     })
 
     // TODO: fix flaky test https://github.com/cypress-io/cypress/issues/23455
@@ -64,8 +84,7 @@ for (const project of PROJECTS) {
       })
 
       cy.contains('New.cy.js').click()
-      cy.waitForSpecToFinish()
-      cy.get('.passed > .num').should('contain', 1)
+      cy.waitForSpecToFinish({ passCount: 1 })
     })
   })
 }
diff --git a/npm/webpack-dev-server/cypress/e2e/vue-cli.cy.ts b/npm/webpack-dev-server/cypress/e2e/vue-cli.cy.ts
@@ -21,12 +21,32 @@ for (const project of PROJECTS) {
     it('should mount a passing test', () => {
       cy.visitApp()
       cy.contains('HelloWorld.cy.js').click()
-      cy.waitForSpecToFinish()
-      cy.get('.passed > .num').should('contain', 1)
+      cy.waitForSpecToFinish({ passCount: 1 })
       cy.get('.commands-container').within(() => {
         cy.contains('mount')
         cy.contains('<HelloWorld ... />')
       })
     })
+
+    it('should show compilation errors on src changes', () => {
+      cy.visitApp()
+
+      cy.contains('HelloWorld.cy.js').click()
+      cy.waitForSpecToFinish({ passCount: 1 })
+
+      // Create compilation error
+      cy.withCtx(async (ctx) => {
+        const helloWorldVuePath = ctx.path.join('src', 'components', 'HelloWorld.vue')
+
+        await ctx.actions.file.writeFileInProject(
+          helloWorldVuePath,
+          (await ctx.file.readFileInProject(helloWorldVuePath)).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')
+    })
   })
 }
diff --git a/npm/webpack-dev-server/cypress/support/commands.ts b/npm/webpack-dev-server/cypress/support/commands.ts
@@ -1,4 +1,6 @@
 /// <reference types="cypress" />
+import type { ExpectedResults } from '@packages/app/cypress/e2e/support/execute-spec'
+import { waitForSpecToFinish } from '@packages/app/cypress/e2e/support/execute-spec'
 
 declare global {
   namespace Cypress {
@@ -11,24 +13,9 @@ declare global {
        * 3. Waits (with a timeout of 30s) for the Rerun all tests button to be present. This ensures all tests have completed
        *
        */
-      waitForSpecToFinish()
+      waitForSpecToFinish(expectedResults?: ExpectedResults): void
     }
   }
 }
 
-// Here we export the function with no intention to import it
-// This only tells the typescript type checker that this definitely is a module
-// This way, we are allowed to use the global namespace declaration
-export const waitForSpecToFinish = () => {
-  // First ensure the test is loaded
-  cy.get('.passed > .num').should('contain', '--')
-  cy.get('.failed > .num').should('contain', '--')
-
-  // Then ensure the tests are running
-  cy.contains('Your tests are loading...').should('not.exist')
-
-  // Then ensure the tests have finished
-  cy.get('[aria-label="Rerun all tests"]', { timeout: 30000 })
-}
-
 Cypress.Commands.add('waitForSpecToFinish', waitForSpecToFinish)
diff --git a/npm/webpack-dev-server/src/makeDefaultWebpackConfig.ts b/npm/webpack-dev-server/src/makeDefaultWebpackConfig.ts
@@ -24,9 +24,18 @@ export function makeDefaultWebpackConfig (
 
   debug(`Using HtmlWebpackPlugin version ${version} from ${importPath}`)
 
+  const optimization = <Record<string, any>>{}
+
+  if (config.sourceWebpackModulesResult.webpack.majorVersion === 5) {
+    optimization.emitOnErrors = true
+  } else {
+    optimization.noEmitOnErrors = false
+  }
+
   const finalConfig = {
     mode: 'development',
     optimization: {
+      ...optimization,
       splitChunks: {
         chunks: 'all',
       },
diff --git a/npm/webpack-dev-server/test/makeWebpackConfig.spec.ts b/npm/webpack-dev-server/test/makeWebpackConfig.spec.ts
diff --git a/packages/app/cypress/e2e/support/execute-spec.ts b/packages/app/cypress/e2e/support/execute-spec.ts
