fix: remove asset size warnings and enable nuxt e2e tests (#21074)

* fix: remove asset size warnings and enable nuxt e2e tests * bump timeout
cypress-io · Apr 14, 2022 · 6dae45e · 6dae45e · cypress-bot · Apr 14, 2022
1 parent 0e7b555
commit 6dae45e
Show file tree

Hide file tree

Showing 6 changed files with 60 additions and 8 deletions.
diff --git a/npm/webpack-dev-server-fresh/cypress.config.ts b/npm/webpack-dev-server-fresh/cypress.config.ts
@@ -3,7 +3,7 @@ import { defineConfig } from 'cypress'
 export default defineConfig({
   projectId: 'ypt4pf',
   e2e: {
-    defaultCommandTimeout: 10000, // these take a bit longer b/c they're e2e open mode test
+    defaultCommandTimeout: 20000, // these take a bit longer b/c they're e2e open mode test
     async setupNodeEvents (on, config) {
       if (!process.env.HTTP_PROXY_TARGET_FOR_ORIGIN_REQUESTS) {
         throw new Error('HTTP_PROXY_TARGET_FOR_ORIGIN_REQUESTS is missing. Close Cypress and run tests using the `yarn cypress:*` commands from the `packages/app` directory')

diff --git a/npm/webpack-dev-server-fresh/cypress/e2e/create-react-app.cy.ts b/npm/webpack-dev-server-fresh/cypress/e2e/create-react-app.cy.ts
@@ -38,7 +38,7 @@ for (const project of WEBPACK_REACT) {
         )
       })
 
-      cy.get('.failed > .num', { timeout: 10000 }).should('contain', 1)
+      cy.get('.failed > .num').should('contain', 1)
 
       cy.withCtx(async (ctx) => {
         await ctx.actions.file.writeFileInProject(

diff --git a/npm/webpack-dev-server-fresh/cypress/e2e/nuxt.cy.ts b/npm/webpack-dev-server-fresh/cypress/e2e/nuxt.cy.ts
@@ -2,7 +2,7 @@
 /// <reference path="../support/e2e.ts" />
 import type { ProjectFixtureDir } from '@tooling/system-tests/lib/fixtureDirs'
 
-const PROJECTS: ProjectFixtureDir[] = ['nuxtjs2', 'vuecli4-vue2']
+const PROJECTS: ProjectFixtureDir[] = ['nuxtjs2']
 
 // Add to this list to focus on a particular permutation
 const ONLY_PROJECTS: ProjectFixtureDir[] = []
@@ -14,17 +14,56 @@ for (const project of PROJECTS) {
 
   // TODO: This will work once `cypress/vue2` is bundled in the binary
   // Since Nuxt.js 2 is based on `vue@2`.
-  describe.skip(`Working with ${project}`, () => {
+  describe(`Working with ${project}`, () => {
     beforeEach(() => {
       cy.scaffoldProject(project)
       cy.openProject(project)
       cy.startAppServer('component')
     })
 
-    it('should mount a passing test', () => {
+    it('should mount a passing test and live-reload', () => {
       cy.visitApp()
       cy.contains('Tutorial.cy.js').click()
       cy.get('.passed > .num').should('contain', 1)
+
+      cy.withCtx(async (ctx) => {
+        const tutorialVuePath = ctx.path.join('components', 'Tutorial.vue')
+
+        await ctx.actions.file.writeFileInProject(
+          tutorialVuePath,
+          (await ctx.file.readFileInProject(tutorialVuePath)).replace('Nuxt', 'Tutorial'),
+        )
+      })
+
+      cy.get('.failed > .num').should('contain', 1)
+
+      cy.withCtx(async (ctx) => {
+        const tutorialCyPath = ctx.path.join('components', 'Tutorial.cy.js')
+
+        await ctx.actions.file.writeFileInProject(
+          tutorialCyPath,
+          (await ctx.file.readFileInProject(tutorialCyPath)).replace('Nuxt', 'Tutorial'),
+        )
+      })
+
+      cy.get('.passed > .num').should('contain', 1)
+    })
+
+    it('should detect new spec', () => {
+      cy.visitApp()
+
+      cy.withCtx(async (ctx) => {
+        const newSpecPath = ctx.path.join('components', 'New.cy.js')
+        const tutorialCyPath = ctx.path.join('components', 'Tutorial.cy.js')
+
+        await ctx.actions.file.writeFileInProject(
+          newSpecPath,
+          await ctx.file.readFileInProject(tutorialCyPath),
+        )
+      })
+
+      cy.contains('New.cy.js').click()
+      cy.get('.passed > .num').should('contain', 1)
     })
   })
 }
diff --git a/npm/webpack-dev-server-fresh/src/helpers/nuxtHandler.ts b/npm/webpack-dev-server-fresh/src/helpers/nuxtHandler.ts
@@ -16,6 +16,10 @@ export async function nuxtHandler ({ devServerConfig }: PresetHandler): Promise<
 
     const webpackConfig = await getWebpackConfig()
 
+    // Nuxt has asset size warnings configured by default which will cause webpack overlays to appear
+    // in the browser which we don't want.
+    delete webpackConfig.performance
+
     debug('webpack config %o', webpackConfig)
 
     return webpackConfig

diff --git a/npm/webpack-dev-server-fresh/test/handlers/nuxtHandler.spec.ts b/npm/webpack-dev-server-fresh/test/handlers/nuxtHandler.spec.ts
@@ -19,5 +19,6 @@ describe('nuxtHandler', function () {
 
     // Verify it's a Vue-specific webpack config by seeing if VueLoader is present.
     expect(config.plugins.find((plug) => plug.constructor.name === 'VueLoader'))
+    expect(config.performance).to.be.undefined
   })
 })
diff --git a/system-tests/project-fixtures/nuxtjs2/cypress.config.ts b/system-tests/project-fixtures/nuxtjs2/cypress.config.ts
@@ -4,7 +4,15 @@ export default defineConfig({
   component: {
     devServer: {
       framework: 'nuxt',
-      bundler: 'webpack'
-    }
+      bundler: 'webpack',
+      // Necessary due to cypress/vue resolving from cypress/node_modules rather than the project root
+      webpackConfig: {
+        resolve: {
+          alias: {
+            'vue': require.resolve('vue'),
+          }
+        }
+      }
+    },
   },
-})
+})