fix(vite-dev-server): ensure assets are correctly reloaded (#24965)

* do not use custom HMR * remove old code
cypress-io · Dec 8, 2022 · 89c013f · 89c013f · cypress-bot · Dec 8, 2022
1 parent 78412e9
commit 89c013f
Show file tree

Hide file tree

Showing 12 changed files with 931 additions and 3 deletions.
diff --git a/npm/vite-dev-server/cypress/e2e/vite-dev-server.cy.ts b/npm/vite-dev-server/cypress/e2e/vite-dev-server.cy.ts
@@ -3,6 +3,45 @@
 import dedent from 'dedent'
 
 describe('Config options', () => {
+  it('works with tailwind', () => {
+    cy.scaffoldProject('tailwind-vite')
+    cy.openProject('tailwind-vite')
+    cy.startAppServer('component')
+
+    cy.visitApp()
+    cy.contains('App.cy.jsx').click()
+    cy.waitForSpecToFinish()
+    cy.get('.passed > .num').should('contain', 1)
+    cy.withCtx(async (ctx) => {
+      // Add a new spec with bg-blue-100 that asserts the style is correct
+      // If HMR + Tailwind is working properly, it'll pass.
+      await ctx.actions.file.writeFileInProject(
+        'src/App.cy.jsx', `
+        import React from 'react'
+        import { mount } from 'cypress/react18'
+
+        export const App = () => {
+          return (
+            <div className='bg-blue-100' id='hello'>
+              Hello
+            </div>
+          )
+        }
+
+        it('works', () => {
+          mount(<App />)
+          cy.get('#hello').should('have.css', 'background-color', 'rgb(219, 234, 254)')
+        })
+
+        it('dummy', () => {})
+        `,
+      )
+    })
+
+    cy.waitForSpecToFinish()
+    cy.get('.passed > .num').should('contain', 2)
+  })
+
   it('supports supportFile = false', () => {
     cy.scaffoldProject('vite2.9.1-react')
     cy.openProject('vite2.9.1-react', ['--config-file', 'cypress-vite-no-support.config.ts'])

diff --git a/npm/vite-dev-server/src/plugins/cypress.ts b/npm/vite-dev-server/src/plugins/cypress.ts
@@ -127,7 +127,7 @@ export const Cypress = (
         if (iterationNumber > HMR_DEPENDENCY_LOOKUP_MAX_ITERATION) {
           debug(`max hmr iteration reached: ${HMR_DEPENDENCY_LOOKUP_MAX_ITERATION}; Rerun will not happen on this file change.`)
 
-          return []
+          return
         }
 
         // as soon as we find one of the specs, we trigger the re-run of tests
@@ -139,7 +139,7 @@ export const Cypress = (
 
             // if we update support we know we have to re-run it all
             // no need to check further
-            return []
+            return
           }
 
           if (mod.file && specsPathsSet.has(mod.file)) {
@@ -156,7 +156,7 @@ export const Cypress = (
         iterationNumber += 1
       }
 
-      return []
+      return
     },
   }
 }

diff --git a/system-tests/projects/tailwind-vite/cypress.config.js b/system-tests/projects/tailwind-vite/cypress.config.js
@@ -0,0 +1,12 @@
+const path = require('path')
+
+module.exports = {
+  component: {
+    devServer: {
+      framework: 'react',
+      bundler: 'vite',
+    },
+    indexHtmlFile: path.join(__dirname, 'index.html'),
+    supportFile: path.join(__dirname, 'support.js'),
+  },
+}
diff --git a/system-tests/projects/tailwind-vite/index.css b/system-tests/projects/tailwind-vite/index.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/system-tests/projects/tailwind-vite/index.html b/system-tests/projects/tailwind-vite/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <title>Components App</title>
+  </head>
+  <body>
+    <div data-cy-root></div>
+  </body>
+</html>
diff --git a/system-tests/projects/tailwind-vite/package.json b/system-tests/projects/tailwind-vite/package.json
@@ -0,0 +1,11 @@
+{
+  "dependencies": {
+    "@cypress/vite-dev-server": "file:../../../npm/vite-dev-server",
+    "autoprefixer": "10.4.13",
+    "postcss": "8.4.19",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "tailwindcss": "3.2.4",
+    "vite": "3.2.2"
+  }
+}
diff --git a/system-tests/projects/tailwind-vite/postcss.config.js b/system-tests/projects/tailwind-vite/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/system-tests/projects/tailwind-vite/src/App.cy.jsx b/system-tests/projects/tailwind-vite/src/App.cy.jsx
@@ -0,0 +1,15 @@
+import React from 'react'
+import { mount } from 'cypress/react18'
+
+export const App = () => {
+  return (
+    <div className='bg-red-100' id='hello'>
+      Hello
+    </div>
+  )
+}
+
+it('works', () => {
+  mount(<App />)
+  cy.get('#hello').should('have.css', 'background-color', 'rgb(254, 226, 226)')
+})
diff --git a/system-tests/projects/tailwind-vite/support.js b/system-tests/projects/tailwind-vite/support.js
@@ -0,0 +1 @@
+import './index.css'
diff --git a/system-tests/projects/tailwind-vite/tailwind.config.js b/system-tests/projects/tailwind-vite/tailwind.config.js
@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ['./src/**/*'],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
diff --git a/system-tests/projects/tailwind-vite/vite.config.js b/system-tests/projects/tailwind-vite/vite.config.js
@@ -0,0 +1,10 @@
+export default {
+  resolve: {
+    alias: {
+      'react': require.resolve('react'),
+      'react-dom/client': require.resolve('react-dom/client'),
+      'react-dom': require.resolve('react-dom'),
+    },
+  },
+  logLevel: 'silent',
+}