Vitest 4 upgrade

package.json

@@ -38,16 +38,17 @@
     "@rollup/plugin-commonjs": "^25.0.7",
     "@rollup/plugin-node-resolve": "15.2.3",
     "@rollup/plugin-typescript": "^12.1.4",
-    "@vitest/browser": "^3.2.4",
+    "@vitest/browser": "^4.0.5",
+    "@vitest/browser-playwright": "^4.0.5",
     "husky": "^9.0.11",
     "lint-staged": "^15.2.2",
-    "playwright": "^1.51.0",
+    "playwright": "^1.56.0",
     "prettier": "^3.2.5",
     "prettier-plugin-embed": "^0.4.15",
     "prettier-plugin-sql": "^0.18.1",
     "rollup": "4.14.3",
     "rollup-plugin-dts": "^6.2.1",
     "typescript": "^5.7.2",
-    "vitest": "^3.2.4"
+    "vitest": "^4.0.5"
   }
 }

packages/adapter-sql-js/vitest.config.ts

@@ -1,8 +1,9 @@
+import { playwright } from '@vitest/browser-playwright';
 import topLevelAwait from 'vite-plugin-top-level-await';
 import wasm from 'vite-plugin-wasm';
-import { defineConfig, UserConfigExport } from 'vitest/config';
+import { defineConfig, ViteUserConfigExport } from 'vitest/config';
 
-const config: UserConfigExport = {
+const config: ViteUserConfigExport = {
   worker: {
     format: 'es',
     plugins: () => [wasm(), topLevelAwait()]
@@ -21,7 +22,7 @@ const config: UserConfigExport = {
     browser: {
       enabled: true,
       headless: true,
-      provider: 'playwright',
+      provider: playwright(),
       instances: [
         {
           browser: 'chromium'

packages/attachments/vitest.config.ts

@@ -1,16 +1,18 @@
+import { playwright } from '@vitest/browser-playwright';
 import topLevelAwait from 'vite-plugin-top-level-await';
-import { defineConfig, UserConfigExport } from 'vitest/config';
+import wasm from 'vite-plugin-wasm';
+import { defineConfig, ViteUserConfigExport } from 'vitest/config';
 
-const config: UserConfigExport = {
-  plugins: [topLevelAwait()],
+const config: ViteUserConfigExport = {
+  plugins: [wasm(), topLevelAwait()],
   test: {
     isolate: false,
     globals: true,
     include: ['tests/**/*.test.ts'],
     browser: {
       enabled: true,
       headless: true,
-      provider: 'playwright',
+      provider: playwright(),
       instances: [
         {
           browser: 'chromium'

packages/drizzle-driver/vitest.config.ts

@@ -1,8 +1,9 @@
+import { playwright } from '@vitest/browser-playwright';
 import topLevelAwait from 'vite-plugin-top-level-await';
 import wasm from 'vite-plugin-wasm';
-import { defineConfig, UserConfigExport } from 'vitest/config';
+import { defineConfig, ViteUserConfigExport } from 'vitest/config';
 
-const config: UserConfigExport = {
+const config: ViteUserConfigExport = {
   worker: {
     format: 'es',
     plugins: () => [wasm(), topLevelAwait()]
@@ -21,7 +22,7 @@ const config: UserConfigExport = {
     browser: {
       enabled: true,
       headless: true,
-      provider: 'playwright',
+      provider: playwright(),
       instances: [
         {
           browser: 'chromium'

packages/kysely-driver/vitest.config.ts

@@ -1,8 +1,9 @@
+import { playwright } from '@vitest/browser-playwright';
 import topLevelAwait from 'vite-plugin-top-level-await';
 import wasm from 'vite-plugin-wasm';
-import { defineConfig, UserConfigExport } from 'vitest/config';
+import { defineConfig, ViteUserConfigExport } from 'vitest/config';
 
-const config: UserConfigExport = {
+const config: ViteUserConfigExport = {
   worker: {
     format: 'es',
     plugins: () => [wasm(), topLevelAwait()]
@@ -21,7 +22,7 @@ const config: UserConfigExport = {
     browser: {
       enabled: true,
       headless: true,
-      provider: 'playwright',
+      provider: playwright(),
       instances: [
         {
           browser: 'chromium'

packages/react/vitest.config.ts

@@ -1,9 +1,10 @@
-import { defineConfig, UserConfigExport } from 'vitest/config';
+import { playwright } from '@vitest/browser-playwright';
+import { defineConfig, ViteUserConfigExport } from 'vitest/config';
 
 import topLevelAwait from 'vite-plugin-top-level-await';
 import wasm from 'vite-plugin-wasm';
 
-const config: UserConfigExport = {
+const config: ViteUserConfigExport = {
   // This is only needed for local tests to resolve the package name correctly
   worker: {
     format: 'es',
@@ -31,7 +32,7 @@ const config: UserConfigExport = {
        * Starts each test in a new iFrame
        */
       isolate: true,
-      provider: 'playwright',
+      provider: playwright(),
       headless: true,
       instances: [
         {

packages/vue/vitest.config.ts

@@ -1,9 +1,10 @@
-import { defineConfig, UserConfigExport } from 'vitest/config';
+import { playwright } from '@vitest/browser-playwright';
+import { defineConfig, ViteUserConfigExport } from 'vitest/config';
 
 import topLevelAwait from 'vite-plugin-top-level-await';
 import wasm from 'vite-plugin-wasm';
 
-const config: UserConfigExport = {
+const config: ViteUserConfigExport = {
   // This is only needed for local tests to resolve the package name correctly
   worker: {
     format: 'es',
@@ -31,7 +32,7 @@ const config: UserConfigExport = {
        * Starts each test in a new iFrame
        */
       isolate: true,
-      provider: 'playwright',
+      provider: playwright(),
       headless: true,
       instances: [
         {

packages/web/tests/watch.test.ts

@@ -671,9 +671,27 @@ describe('Watch Tests', { sequential: true }, () => {
     });
     onTestFinished(dispose);
 
+    // Wait for the initial load to complete
+    await vi.waitFor(
+      () => {
+        expect(watch.state.isLoading).false;
+      },
+      { timeout: 1000 }
+    );
+
+    notificationCount = 0; // We want to count the number of state changes after the initial load
+
     // Should only a state change trigger for this operation
     await powersync.execute('INSERT INTO assets(id, make, customer_id) VALUES (uuid(), ?, ?)', ['test', uuid()]);
 
+    // We should get an update for the change above
+    await vi.waitFor(
+      () => {
+        expect(notificationCount).equals(1);
+      },
+      { timeout: 1000 }
+    );
+
     // Should not trigger any state change for these operations
     await powersync.execute('INSERT INTO assets(id, make, customer_id) VALUES (uuid(), ?, ?)', ['make1', uuid()]);
     await powersync.execute('INSERT INTO assets(id, make, customer_id) VALUES (uuid(), ?, ?)', ['make2', uuid()]);

packages/web/vitest.config.ts

@@ -1,70 +1,73 @@
 import path from 'path';
 import topLevelAwait from 'vite-plugin-top-level-await';
 import wasm from 'vite-plugin-wasm';
-import { defineConfig, UserConfigExport } from 'vitest/config';
+import { defineConfig, ViteUserConfigExport } from 'vitest/config';
 
-const config: UserConfigExport = {
-  server: {
-    headers: {
-      'Cross-Origin-Opener-Policy': 'same-origin',
-      'Cross-Origin-Embedder-Policy': 'require-corp'
-    }
-  },
-  // This is only needed for local tests to resolve the package name correctly
-  resolve: {
-    alias: {
-      /**
-       * Note that this requires the Typescript to be compiled with `tsc`
-       * first. This is required due to the format of Webworker URIs
-       * they link to `.js` files.
-       */
-      '@powersync/web': path.resolve(__dirname, './lib/src'),
-      // https://jira.mongodb.org/browse/NODE-5773
-      bson: require.resolve('bson')
-    }
-  },
-  worker: {
-    format: 'es',
-    plugins: () => [wasm(), topLevelAwait()]
-  },
-  optimizeDeps: {
-    // Don't optimise these packages as they contain web workers and WASM files.
-    // https://github.com/vitejs/vite/issues/11672#issuecomment-1415820673
-    exclude: ['@journeyapps/wa-sqlite', '@powersync/web'],
-    include: ['bson', 'comlink', 'async-mutex']
-  },
-  plugins: [wasm(), topLevelAwait()],
-  test: {
-    globals: true,
-    include: ['tests/**/*.test.ts'],
-    maxConcurrency: 1,
-    // This doesn't currently seem to work in browser mode, but setting this for one day when it does
-    sequence: {
-      shuffle: false, // Disable shuffling of test files
-      concurrent: false // Run test files sequentially
+export default defineConfig(async () => {
+  // Import of an ES module is not directly supported since we don't yet define this package directly as an ES module
+  const { playwright } = await import('@vitest/browser-playwright');
+
+  return {
+    server: {
+      headers: {
+        'Cross-Origin-Opener-Policy': 'same-origin',
+        'Cross-Origin-Embedder-Policy': 'require-corp'
+      }
+    },
+    // This is only needed for local tests to resolve the package name correctly
+    resolve: {
+      alias: {
+        /**
+         * Note that this requires the Typescript to be compiled with `tsc`
+         * first. This is required due to the format of Webworker URIs
+         * they link to `.js` files.
+         */
+        '@powersync/web': path.resolve(__dirname, './lib/src'),
+        // https://jira.mongodb.org/browse/NODE-5773
+        bson: require.resolve('bson')
+      }
     },
-    browser: {
-      enabled: true,
-      /**
-       * Starts each test in a new iFrame
-       */
-      isolate: true,
-      provider: 'playwright',
-      headless: true,
-      instances: [
-        {
-          browser: 'chromium'
-        }
-        // {
-        //   browser: 'firefox'
-        // }
-        // This requires some additional work to get all tests passing
-        // {
-        //   browser: 'webkit'
-        // }
-      ]
+    worker: {
+      format: 'es',
+      plugins: () => [wasm(), topLevelAwait()]
+    },
+    optimizeDeps: {
+      // Don't optimise these packages as they contain web workers and WASM files.
+      // https://github.com/vitejs/vite/issues/11672#issuecomment-1415820673
+      exclude: ['@journeyapps/wa-sqlite', '@powersync/web'],
+      include: ['bson', 'comlink', 'async-mutex']
+    },
+    plugins: [wasm(), topLevelAwait()],
+    test: {
+      globals: true,
+      include: ['tests/**/*.test.ts'],
+      maxConcurrency: 1,
+      // This doesn't currently seem to work in browser mode, but setting this for one day when it does
+      sequence: {
+        shuffle: false, // Disable shuffling of test files
+        concurrent: false // Run test files sequentially
+      },
+      browser: {
+        enabled: true,
+        /**
+         * Starts each test in a new iFrame
+         */
+        isolate: true,
+        provider: playwright(),
+        headless: true,
+        instances: [
+          {
+            browser: 'chromium'
+          }
+          // {
+          //   browser: 'firefox'
+          // }
+          // This requires some additional work to get all tests passing
+          // {
+          //   browser: 'webkit'
+          // }
+        ]
+      }
     }
-  }
-};
-
-export default defineConfig(config);
+  } satisfies ViteUserConfigExport;
+});