test: add test for vitest browser mode

.github/workflows/ci.yml

@@ -122,7 +122,7 @@ jobs:
       fail-fast: false
       matrix:
         include:
-          # - os: windows-latest
+          - os: ubuntu-latest
           - os: namespace-profile-mac-default
     runs-on: ${{ matrix.os }}
     steps:
@@ -150,6 +150,9 @@ jobs:
       - name: Run CLI lint
         run: pnpm lint
 
+      - name: Install Playwright browsers
+        run: pnpm exec playwright install chromium
+
       - name: Run CLI E2E tests
         run: |
           pnpm test

packages/cli/package.json

@@ -45,7 +45,9 @@
   "devDependencies": {
     "@napi-rs/cli": "catalog:",
     "@oxc-node/core": "catalog:",
+    "@vitest/browser": "catalog:",
     "@voidzero-dev/vite-plus-tools": "workspace:",
+    "playwright": "catalog:",
     "rolldown": "catalog:"
   },
   "napi": {

packages/cli/snap-tests/fingerprint-ignore-test/steps.json

@@ -1,4 +1,5 @@
 {
+  "ignoredPlatforms": ["linux"],
   "env": {
     "VITE_DISABLE_AUTO_INSTALL": "1"
   },

packages/cli/snap-tests/vitest-browser-mode/package.json

@@ -0,0 +1,2 @@
+{
+}

packages/cli/snap-tests/vitest-browser-mode/snap.txt

@@ -0,0 +1,42 @@
+> vite test
+
+ RUN  v<semver> <cwd>
+
+ ✓ |chromium| src/foo.test.js (1 test) <variable>ms
+
+ Test Files  1 passed (1)
+      Tests  1 passed (1)
+   Start at  <date>
+   Duration  <variable>ms (transform <variable>ms, setup <variable>ms, collect <variable>ms, tests <variable>ms, environment <variable>ms, prepare <variable>ms)
+
+
+
+> echo //comment >> src/foo.js
+> vite test
+✗ cache miss: content of input 'src/foo.js' changed, executing
+
+ RUN  v<semver> <cwd>
+
+ ✓ |chromium| src/foo.test.js (1 test) <variable>ms
+
+ Test Files  1 passed (1)
+      Tests  1 passed (1)
+   Start at  <date>
+   Duration  <variable>ms (transform <variable>ms, setup <variable>ms, collect <variable>ms, tests <variable>ms, environment <variable>ms, prepare <variable>ms)
+
+
+
+> echo //comment >> src/bar.js
+> vite test
+✓ cache hit, replaying
+
+ RUN  v<semver> <cwd>
+
+ ✓ |chromium| src/foo.test.js (1 test) <variable>ms
+
+ Test Files  1 passed (1)
+      Tests  1 passed (1)
+   Start at  <date>
+   Duration  <variable>ms (transform <variable>ms, setup <variable>ms, collect <variable>ms, tests <variable>ms, environment <variable>ms, prepare <variable>ms)
+
+

packages/cli/snap-tests/vitest-browser-mode/src/bar.js

@@ -0,0 +1 @@
+export default 'bar';

packages/cli/snap-tests/vitest-browser-mode/src/foo.js

@@ -0,0 +1 @@
+export default 'foo';

packages/cli/snap-tests/vitest-browser-mode/src/foo.test.js

@@ -0,0 +1,8 @@
+import { describe, expect, it } from 'vitest';
+import foo from './foo';
+
+describe('foo', () => {
+  it('should equal "foo"', () => {
+    expect(foo).toBe('foo');
+  });
+});

packages/cli/snap-tests/vitest-browser-mode/steps.json

@@ -0,0 +1,13 @@
+{
+  "ignoredPlatforms": ["linux"],
+  "env": {
+    "VITE_DISABLE_AUTO_INSTALL": "1"
+  },
+  "commands": [
+    "vite test",
+    "echo //comment >> src/foo.js",
+    "vite test",
+    "echo //comment >> src/bar.js",
+    "vite test"
+  ]
+}

packages/cli/snap-tests/vitest-browser-mode/vitest.config.ts

@@ -0,0 +1,16 @@
+// import { defineProject } from 'vitest/config';
+
+export default {
+  test: {
+    browser: {
+      enabled: true,
+      provider: 'playwright',
+      headless: true,
+      instances: [
+        {
+          browser: 'chromium',
+        },
+      ],
+    },
+  },
+};

packages/cli/snap-tests/yarn-install-with-options/snap.txt

@@ -40,7 +40,7 @@
     --mutex <type>[:specifier]          use a mutex to ensure only one yarn instance is executing
     --emoji [bool]                      enable emoji in output (default: true)
     -s, --silent                        skip Yarn console logs, other types of logs (script output) will be printed
-    --cwd <cwd>                         working directory to use (default: /private<cwd>)
+    --cwd <cwd>                         working directory to use (default: <cwd>)
     --proxy <host>                      
     --https-proxy <host>                
     --registry <url>                    override configuration registry

packages/cli/snap-tests/yarn-install-with-options/steps.json

@@ -1,4 +1,5 @@
 {
+  "ignoredPlatforms": ["linux"],
   "env": {
     "VITE_DISABLE_AUTO_INSTALL": "1"
   },

packages/tools/src/snap-test.ts

@@ -18,9 +18,17 @@ const exec = async (command: string, options: cp.ExecOptionsWithStringEncoding)
 import { replaceUnstableOutput } from './utils.ts';
 
 // Create a unique temporary directory for testing
-const tempTmpDir = `${tmpdir()}/vite-plus-test-${randomUUID()}`;
+// On macOS, `tmpdir()` is a symlink. Resolve it so that we can replace the resolved cwd in outputs.
+const tempTmpDir = `${fs.realpathSync(tmpdir())}/vite-plus-test-${randomUUID()}`;
 fs.mkdirSync(tempTmpDir, { recursive: true });
 
+// Make dependencies available in the test cases
+fs.symlinkSync(
+  path.resolve('node_modules'),
+  path.join(tempTmpDir, 'node_modules'),
+  process.platform === 'win32' ? 'junction' : 'dir'
+);
+
 // Clean up the temporary directory on exit
 process.on('exit', () => fs.rmSync(tempTmpDir, { recursive: true, force: true }));
 
@@ -41,17 +49,22 @@ for (const caseName of fs.readdirSync(casesDir)) {
 // await Promise.all(tasks);
 
 interface Steps {
+  ignoredPlatforms?: string[];
   env: Record<string, string>;
   commands: string[];
 }
 
 async function runTestCase(name: string) {
+  const steps: Steps = JSON.parse(await fsPromises.readFile(`${casesDir}/${name}/steps.json`, 'utf-8'));
+  if (steps.ignoredPlatforms !== undefined && steps.ignoredPlatforms.includes(process.platform)) {
+    console.log('%s skipped on platform %s', name, process.platform);
+    return;
+  }
+
   console.log('%s started', name);
   const caseTmpDir = `${tempTmpDir}/${name}`;
   await fsPromises.cp(`${casesDir}/${name}`, caseTmpDir, { recursive: true, errorOnExist: true });
 
-  const steps: Steps = JSON.parse(await fsPromises.readFile(`${caseTmpDir}/steps.json`, 'utf-8'));
-
   const env = {
     ...process.env,
     // Indicate CLI is running in test mode, so that it prints more detailed outputs.

packages/tools/src/utils.ts

@@ -9,8 +9,9 @@ export function replaceUnstableOutput(output: string, cwd?: string) {
     .replaceAll(/([@/\s]v?)\d+\.\d+\.\d+(?:-.*)?/g, '$1<semver>')
     // date
     .replaceAll(/\d{2}:\d{2}:\d{2}/g, '<date>')
+    // duration
+    .replaceAll(/\d+(?:\.\d+)?(?:s|ms|µs)/g, '<variable>ms')
     // oxlint
-    .replaceAll(/\d+(?:\.\d+)?(?:s|ms)/g, '<variable>ms')
     .replaceAll(/with \d+ rules/g, 'with <variable> rules')
     .replaceAll(/using \d+ threads/g, 'using <variable> threads')
     // pnpm