refactor!: run cypress headlessly by default; add test:*:dev commands (#183)

Author: haoqunjiang

scripts/test.mjs

@@ -19,39 +19,21 @@ await $`pnpm install`
 
 for (const projectName of projects) {
   cd(path.resolve(playgroundDir, projectName))
-
-  if (projectName.includes('vitest')) {
-    console.log(`Running unit tests in ${projectName}`)
-    await $`pnpm test:unit`
-  }
-
-  cd(path.resolve(playgroundDir, projectName))
-
   const packageJSON = require(path.resolve(playgroundDir, projectName, 'package.json'));
 
   console.log(`Building ${projectName}`)
   await $`pnpm build`
-
-  if ('cypress' in packageJSON.devDependencies) {
-    console.log(`Running e2e tests in ${projectName}`)
-    await $`pnpm test:e2e:ci`
-  }
+  
   if ('@playwright/test' in packageJSON.devDependencies) {
     await $`pnpm playwright install --with-deps`
+  }
+
+  if ('test:e2e' in packageJSON.scripts) {
+    console.log(`Running e2e tests in ${projectName}`)
     await $`pnpm test:e2e`
   }
 
-  if ('test:unit:ci' in packageJSON.scripts) {
-    // Without Vitest, the project will use Cypress Component Testing for unit testing
-    // Cypress Component Testing is flaky in CI environment, so we need to tolerate the errors.
-    try {
-      await $`pnpm test:unit:ci`
-    } catch (e) {
-      console.error(`Component Testing in ${projectName} fails:`)
-      console.error(e)
-      process.exit(1)
-    }
-  } else if ('test:unit' in packageJSON.scripts) {
+  if ('test:unit' in packageJSON.scripts) {
     console.log(`Running unit tests in ${projectName}`)
     await $`pnpm test:unit`
   }

template/config/cypress-ct/package.json

@@ -1,7 +1,7 @@
 {
   "scripts": {
-    "test:unit": "cypress open --component",
-    "test:unit:ci": "cypress run --component --quiet --reporter spec"
+    "test:unit": "cypress run --component",
+    "test:unit:dev": "cypress open --component"
   },
   "dependencies": {
     "vue": "^3.2.40"

template/config/cypress/package.json

@@ -1,7 +1,7 @@
 {
   "scripts": {
-    "test:e2e": "start-server-and-test preview http://localhost:4173/ 'cypress open --e2e'",
-    "test:e2e:ci": "start-server-and-test preview http://localhost:4173/ 'cypress run --e2e'"
+    "test:e2e": "start-server-and-test preview :4173 'cypress run --e2e'",
+    "test:e2e:dev": "start-server-and-test 'vite dev --port 4173' :4173 'cypress open --e2e'"
   },
   "devDependencies": {
     "cypress": "^10.10.0",

utils/generateReadme.ts

@@ -76,7 +76,7 @@ ${commandFor('test:unit')}
 ### Run Headed Component Tests with [Cypress Component Testing](https://on.cypress.io/component)
 
 \`\`\`sh
-${commandFor('test:unit')} # or \`${commandFor('test:unit:ci')}\` for headless testing
+${commandFor('test:unit:dev')} # or \`${commandFor('test:unit')}\` for headless testing
 \`\`\`
 `
   }
@@ -85,9 +85,18 @@ ${commandFor('test:unit')} # or \`${commandFor('test:unit:ci')}\` for headless t
     npmScriptsDescriptions += `
 ### Run End-to-End Tests with [Cypress](https://www.cypress.io/)
 
+\`\`\`sh
+${commandFor('test:e2e:dev')}
+\`\`\`
+
+This runs the end-to-end tests against the Vite development server.
+It is much faster than the production build.
+
+But it's still recommended to test the production build with \`test:e2e\` before deploying (e.g. in CI environments):
+
 \`\`\`sh
 ${commandFor('build')}
-${commandFor('test:e2e')} # or \`${commandFor('test:e2e:ci')}\` for headless testing
+${commandFor('test:e2e')}
 \`\`\`
 `
   }