Work in progress - Migrate more browser tests to Vitest

Mrtenz · Mrtenz · commit e03fd929ff85 · 2025-03-27T13:01:16.000+01:00
diff --git a/packages/examples/packages/rollup-plugin/rollup.config.mjs b/packages/examples/packages/rollup-plugin/rollup.config.mjs
@@ -1,4 +1,3 @@
-// eslint-disable-next-line
 import snaps from '@metamask/snaps-rollup-plugin';
 import { babel } from '@rollup/plugin-babel';
 import commonjs from '@rollup/plugin-commonjs';
diff --git a/packages/snaps-cli/src/commands/eval/eval.e2e.test.ts b/packages/snaps-cli/src/commands/eval/eval.e2e.test.ts
@@ -1,6 +1,7 @@
+import { resolve } from 'path';
+
 import type { TestRunner } from '@metamask/snaps-cli/test-utils';
 import { getCommandRunner } from '@metamask/snaps-cli/test-utils';
-import { resolve } from 'path';
 
 describe('mm-snap eval', () => {
   let runner: TestRunner;
diff --git a/packages/snaps-cli/src/commands/eval/eval.test.ts b/packages/snaps-cli/src/commands/eval/eval.test.ts
@@ -1,10 +1,10 @@
-import { getMockConfig } from '@metamask/snaps-cli/test-utils';
 import { DEFAULT_SNAP_BUNDLE } from '@metamask/snaps-utils/test-utils';
 import { promises as fs } from 'fs';
 import ora from 'ora';
 
 import { evaluateHandler } from './eval';
 import { evaluate } from './implementation';
+import { getMockConfig } from '@metamask/snaps-cli/test-utils';
 
 jest.mock('fs');
 jest.mock('./implementation');
diff --git a/packages/snaps-cli/src/commands/manifest/manifest.test.ts b/packages/snaps-cli/src/commands/manifest/manifest.test.ts
@@ -1,11 +1,11 @@
-import { getMockConfig } from '@metamask/snaps-cli/test-utils';
 import { getSnapManifest } from '@metamask/snaps-utils/test-utils';
 import { promises as fs } from 'fs';
 import ora from 'ora';
 
 import { manifest } from './implementation';
 import * as implementation from './implementation';
 import { manifestHandler } from './manifest';
+import { getMockConfig } from '@metamask/snaps-cli/test-utils';
 
 jest.mock('fs');
 jest.mock('./implementation');
diff --git a/packages/snaps-cli/src/commands/serve/serve.e2e.test.ts b/packages/snaps-cli/src/commands/serve/serve.e2e.test.ts
@@ -1,6 +1,7 @@
+import fetch from 'cross-fetch';
+
 import type { TestRunner } from '@metamask/snaps-cli/test-utils';
 import { getCommandRunner } from '@metamask/snaps-cli/test-utils';
-import fetch from 'cross-fetch';
 
 describe('mm-snap serve', () => {
   let runner: TestRunner;
diff --git a/packages/snaps-cli/src/commands/watch/watch.test.ts b/packages/snaps-cli/src/commands/watch/watch.test.ts
@@ -1,10 +1,10 @@
-import { getMockConfig } from '@metamask/snaps-cli/test-utils';
 import { DEFAULT_SNAP_BUNDLE } from '@metamask/snaps-utils/test-utils';
 import fs from 'fs';
 
 import { watch } from './implementation';
 import { watchHandler } from './watch';
 import * as webpack from '../../webpack';
+import { getMockConfig } from '@metamask/snaps-cli/test-utils';
 
 jest.mock('fs');
 jest.mock('../../webpack');
diff --git a/packages/snaps-cli/src/utils/legacy.test.ts b/packages/snaps-cli/src/utils/legacy.test.ts
@@ -1,11 +1,10 @@
-import { getMockConfig } from '@metamask/snaps-cli/test-utils';
-
 import {
   getDependencyRegExp,
   processDependencies,
   sanitizeDependencyPaths,
 } from './legacy';
 import { TranspilationModes } from '../builders';
+import { getMockConfig } from '@metamask/snaps-cli/test-utils';
 
 describe('processDependencies', () => {
   it('returns an empty array when `transpilationMode` is not `localAndDeps`', () => {
diff --git a/packages/snaps-cli/src/webpack/loaders/browserify.test.ts b/packages/snaps-cli/src/webpack/loaders/browserify.test.ts
@@ -1,7 +1,7 @@
-import { getMockConfig } from '@metamask/snaps-cli/test-utils';
 import { bytesToString } from '@metamask/utils';
 
 import loader from './browserify';
+import { getMockConfig } from '@metamask/snaps-cli/test-utils';
 
 describe('loader', () => {
   it('bundles the contents with Browserify', async () => {
diff --git a/packages/snaps-cli/src/webpack/server.test.ts b/packages/snaps-cli/src/webpack/server.test.ts
@@ -1,11 +1,11 @@
-import { getMockConfig } from '@metamask/snaps-cli/test-utils';
 import { getSnapManifest } from '@metamask/snaps-utils/test-utils';
 import fetch from 'cross-fetch';
 import { promises as fs } from 'fs';
 import http, { IncomingMessage, Server, ServerResponse } from 'http';
 import serveMiddleware from 'serve-handler';
 
 import { getAllowedPaths, getServer } from './server';
+import { getMockConfig } from '@metamask/snaps-cli/test-utils';
 
 jest.mock('fs');
 jest.mock('serve-handler', () =>
diff --git a/packages/snaps-controllers/package.json b/packages/snaps-controllers/package.json
@@ -129,6 +129,7 @@
     "@types/readable-stream": "^4.0.15",
     "@types/semver": "^7.5.0",
     "@types/tar-stream": "^3.1.1",
+    "@vitest/browser": "^3.0.8",
     "@wdio/browser-runner": "^8.19.0",
     "@wdio/cli": "^8.19.0",
     "@wdio/globals": "^8.19.0",
@@ -151,7 +152,9 @@
     "ts-node": "^10.9.1",
     "typescript": "~5.3.3",
     "vite": "^6.2.3",
+    "vite-plugin-node-polyfills": "^0.23.0",
     "vite-tsconfig-paths": "^4.0.5",
+    "vitest": "^3.0.8",
     "wdio-chromedriver-service": "^8.1.1",
     "wdio-geckodriver-service": "^5.0.2",
     "webdriverio": "^8.19.0"
diff --git a/packages/snaps-controllers/src/services/iframe/IframeExecutionService.test.browser.ts b/packages/snaps-controllers/src/services/iframe/IframeExecutionService.test.browser.ts
@@ -6,11 +6,14 @@ import {
   spy,
 } from '@metamask/snaps-utils/test-utils';
 import { assert } from '@metamask/utils';
+import { describe, it, expect } from 'vitest';
 
 import { IframeExecutionService } from './IframeExecutionService';
-import { createService, MOCK_BLOCK_NUMBER } from '../../test-utils';
+import { MOCK_BLOCK_NUMBER } from '../../test-utils/constants';
+import { createService } from '../../test-utils/service';
 
-const IFRAME_URL = 'http://localhost:4567';
+const IFRAME_URL = 'http://localhost:63315/iframe/executor/index.html';
+const IFRAME_SANDBOX_URL = 'http://localhost:63315/iframe/test/index.html';
 
 describe('IframeExecutionService', () => {
   it('can boot', async () => {
@@ -88,7 +91,7 @@ describe('IframeExecutionService', () => {
   });
 
   it('can detect outbound requests', async () => {
-    expect.assertions(4);
+    expect.assertions(5);
 
     const { service, messenger } = createService(IframeExecutionService, {
       iframeUrl: new URL(IFRAME_URL),
@@ -134,7 +137,7 @@ describe('IframeExecutionService', () => {
     publishSpy.reset();
   });
 
-  it('properly sandboxes the iframe', async () => {
+  it.only('properly sandboxes the iframe', async () => {
     const { service } = createService(IframeExecutionService, {
       iframeUrl: new URL(IFRAME_URL),
     });
@@ -157,7 +160,7 @@ describe('IframeExecutionService', () => {
     // Creates an iframe attempts to access the iframe created by the execution
     // service. This should fail due to the sandboxing.
     const testFrame = document.createElement('iframe');
-    testFrame.src = `${IFRAME_URL}/test/sandbox`;
+    testFrame.src = IFRAME_SANDBOX_URL;
     document.body.appendChild(testFrame);
 
     expect(await message).toContain(
diff --git a/packages/snaps-controllers/src/services/iframe/test/index.html b/packages/snaps-controllers/src/services/iframe/test/index.html
@@ -11,7 +11,7 @@
     <script>
       (function () {
         try {
-          const snap = top.querySelector('iframe[data-testid="snaps-iframe"]');
+          const snap = parent.document.querySelector('iframe[data-testid="snaps-iframe"]');
           if (!snap) {
             window.parent.postMessage('Failed to find snap iframe.', '*');
             return;
diff --git a/packages/snaps-controllers/src/services/webworker/WebWorkerExecutionService.test.browser.ts b/packages/snaps-controllers/src/services/webworker/WebWorkerExecutionService.test.browser.ts
@@ -6,14 +6,16 @@ import {
   MOCK_SNAP_ID,
   spy,
 } from '@metamask/snaps-utils/test-utils';
+import { describe, it, expect, afterEach } from 'vitest';
 
 import {
   WebWorkerExecutionService,
   WORKER_POOL_ID,
 } from './WebWorkerExecutionService';
-import { createService, MOCK_BLOCK_NUMBER } from '../../test-utils';
+import { MOCK_BLOCK_NUMBER } from '../../test-utils/constants';
+import { createService } from '../../test-utils/service';
 
-const WORKER_POOL_URL = 'http://localhost:4567/worker/pool';
+const WORKER_POOL_URL = 'http://localhost:63315/worker/pool/index.html';
 
 describe('WebWorkerExecutionService', () => {
   afterEach(() => {
diff --git a/packages/snaps-controllers/src/test-utils/constants.ts b/packages/snaps-controllers/src/test-utils/constants.ts
@@ -0,0 +1 @@
+export const MOCK_BLOCK_NUMBER = '0xa70e75';
diff --git a/packages/snaps-controllers/src/test-utils/execution-environment.ts b/packages/snaps-controllers/src/test-utils/execution-environment.ts
@@ -4,6 +4,7 @@ import { logError, type SnapRpcHookArgs } from '@metamask/snaps-utils';
 import type { MockControllerMessenger } from '@metamask/snaps-utils/test-utils';
 import { pipeline } from 'readable-stream';
 
+import { MOCK_BLOCK_NUMBER } from './constants';
 import type {
   ExecutionService,
   ExecutionServiceActions,
@@ -12,8 +13,6 @@ import type {
 } from '../services';
 import { NodeThreadExecutionService, setupMultiplex } from '../services/node';
 
-export const MOCK_BLOCK_NUMBER = '0xa70e75';
-
 export const getNodeEESMessenger = (
   messenger: MockControllerMessenger<
     ExecutionServiceActions,
diff --git a/packages/snaps-controllers/src/test-utils/index.ts b/packages/snaps-controllers/src/test-utils/index.ts
@@ -1,6 +1,6 @@
 export * from './confirmations';
 export * from './controller';
-export * from './execution-environment';
+// export * from './execution-environment';
 export * from './service';
 export * from './sleep';
 export * from './location';
diff --git a/packages/snaps-controllers/src/test-utils/service.ts b/packages/snaps-controllers/src/test-utils/service.ts
@@ -5,7 +5,7 @@ import { logError } from '@metamask/snaps-utils';
 import { pipeline } from 'readable-stream';
 import type { Duplex } from 'readable-stream';
 
-import { MOCK_BLOCK_NUMBER } from './execution-environment';
+import { MOCK_BLOCK_NUMBER } from './constants';
 import type { ErrorMessageEvent } from '../services';
 import { setupMultiplex } from '../services';
 
diff --git a/packages/snaps-controllers/tsconfig.json b/packages/snaps-controllers/tsconfig.json
@@ -3,7 +3,7 @@
   "compilerOptions": {
     "baseUrl": "./"
   },
-  "include": ["./src", "scripts", "package.json", "react-native.d.ts"],
+  "include": ["./src", "scripts", "package.json", "react-native.d.ts", "vitest.config.mts"],
   "references": [
     { "path": "../snaps-execution-environments" },
     { "path": "../snaps-rpc-methods" },
diff --git a/packages/snaps-controllers/vitest.config.mts b/packages/snaps-controllers/vitest.config.mts
@@ -0,0 +1,117 @@
+// eslint-disable-next-line import-x/no-nodejs-modules
+import { join } from 'path';
+import { nodePolyfills } from 'vite-plugin-node-polyfills';
+import tsconfigPaths from 'vite-tsconfig-paths';
+import { defineConfig } from 'vitest/config';
+
+const IFRAME_PATH = join(
+  import.meta.dirname,
+  '../snaps-execution-environments/dist/browserify/iframe',
+);
+
+const IFRAME_TEST_PATH = join(
+  import.meta.dirname,
+  './src/services/iframe/test',
+);
+
+const WORKER_EXECUTOR_PATH = join(
+  import.meta.dirname,
+  '../snaps-execution-environments/dist/browserify/worker-executor',
+);
+
+const WORKER_POOL_PATH = join(
+  import.meta.dirname,
+  '../snaps-execution-environments/dist/browserify/worker-pool',
+);
+
+export default defineConfig({
+  plugins: [tsconfigPaths(), nodePolyfills()],
+
+  server: {
+    port: 63315,
+    strictPort: true,
+
+    proxy: {
+      '/iframe/executor': {
+        target: `http://localhost:63315/@fs${IFRAME_PATH}`,
+        rewrite: (path) => path.replace(/^\/iframe\/executor/u, ''),
+      },
+
+      '/iframe/test': {
+        target: `http://localhost:63315/@fs${IFRAME_TEST_PATH}`,
+        rewrite: (path) => path.replace(/^\/iframe\/test/u, ''),
+      },
+
+      '/worker/executor': {
+        target: `http://localhost:63315/@fs${WORKER_EXECUTOR_PATH}`,
+        rewrite: (path) => path.replace(/^\/worker\/executor/u, ''),
+      },
+
+      '/worker/pool': {
+        target: `http://localhost:63315/@fs${WORKER_POOL_PATH}`,
+        rewrite: (path) => path.replace(/^\/worker\/pool/u, ''),
+      },
+    },
+
+    fs: {
+      strict: true,
+      allow: [
+        './src/services/iframe/test',
+        '../snaps-execution-environments/dist/browserify/iframe',
+        '../snaps-execution-environments/dist/browserify/worker-executor',
+        '../snaps-execution-environments/dist/browserify/worker-pool',
+      ],
+    },
+  },
+
+  test: {
+    // Vitest enables watch mode by default. We disable it here, so it can be
+    // explicitly enabled with `yarn test:watch`.
+    watch: false,
+
+    // The files to include in the test run.
+    include: ['src/**/*.test.browser.ts'],
+
+    browser: {
+      enabled: true,
+      provider: 'webdriverio',
+      instances: [{ browser: 'chrome' }],
+      isolate: false,
+    },
+
+    coverage: {
+      enabled: true,
+
+      reportsDirectory: 'coverage/vite',
+
+      // Configure the coverage provider. We use `istanbul` instead of `v8`
+      // because it seems to be more reliable.
+      provider: 'istanbul',
+
+      // The files to include in the coverage report.
+      include: [
+        'src/**/*.ts',
+        'src/**/*.tsx',
+        'src/**/*.js',
+        'src/**/*.jsx',
+        'src/**/*.mjs',
+      ],
+
+      // The files to exclude from the coverage report.
+      exclude: [
+        'src/**/index.ts',
+        'src/**/*.d.ts',
+        'src/**/*.test.ts',
+        'src/**/*.test.tsx',
+        'src/**/test-utils/**',
+        'src/**/__mocks__/**',
+        'src/**/node-js/**',
+        'src/services/node.ts',
+      ],
+    },
+
+    printConsoleTrace: false,
+    includeTaskLocation: false,
+    disableConsoleIntercept: false,
+  },
+});
diff --git a/packages/snaps-execution-environments/scripts/coverage.ts b/packages/snaps-execution-environments/scripts/coverage.ts
@@ -70,21 +70,21 @@ async function mergeReports() {
     .then(JSON.parse)
     .then(createCoverageMap);
 
-  const wdioMap = await fs
+  const viteMap = await fs
     .readFile(VITE_COVERAGE_FILE, 'utf8')
     .then(JSON.parse)
     .then(createCoverageMap);
 
   const jestFiles = jestMap.files();
 
-  wdioMap.files().forEach((file) => {
-    const coverage = wdioMap.fileCoverageFor(file);
-    const wdioSummary = coverage.toSummary();
+  viteMap.files().forEach((file) => {
+    const coverage = viteMap.fileCoverageFor(file);
+    const viteSummary = coverage.toSummary();
     const jestSummary = jestMap.fileCoverageFor(file).toSummary();
 
     if (
       !jestFiles.includes(file) ||
-      COVERAGE_KEYS.every((key) => wdioSummary[key].pct >= jestSummary[key].pct)
+      COVERAGE_KEYS.every((key) => viteSummary[key].pct >= jestSummary[key].pct)
     ) {
       jestMap.filter((jestFile) => jestFile !== file);
       jestMap.addFileCoverage(coverage);
diff --git a/packages/snaps-execution-environments/tsconfig.json b/packages/snaps-execution-environments/tsconfig.json
@@ -5,7 +5,13 @@
     "typeRoots": ["../../node_modules/@types", "./node_modules/@types"],
     "allowJs": true
   },
-  "include": ["./src", "webpack.config.js", "scripts", "package.json"],
+  "include": [
+    "./src",
+    "webpack.config.js",
+    "scripts",
+    "package.json",
+    "vitest.config.mts"
+  ],
   "references": [
     {
       "path": "../snaps-sdk"
diff --git a/packages/snaps-execution-environments/vitest.config.mts b/packages/snaps-execution-environments/vitest.config.mts
diff --git a/packages/snaps-utils/package.json b/packages/snaps-utils/package.json
diff --git a/packages/snaps-utils/scripts/coverage.ts b/packages/snaps-utils/scripts/coverage.ts
diff --git a/packages/snaps-utils/src/iframe.test.browser.ts b/packages/snaps-utils/src/iframe.test.browser.ts
diff --git a/packages/snaps-utils/src/post-process.test.ts b/packages/snaps-utils/src/post-process.test.ts
diff --git a/packages/snaps-utils/tsconfig.json b/packages/snaps-utils/tsconfig.json
diff --git a/packages/snaps-utils/vitest.config.mts b/packages/snaps-utils/vitest.config.mts
diff --git a/packages/snaps-utils/wdio.config.js b/packages/snaps-utils/wdio.config.js
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,3 @@`
`1`		`-// eslint-disable-next-line`
`2`	`1`	`import snaps from '@metamask/snaps-rollup-plugin';`
`3`	`2`	`import { babel } from '@rollup/plugin-babel';`
`4`	`3`	`import commonjs from '@rollup/plugin-commonjs';`