@yabbadabbadev/pepito 0.1.1 → 0.2.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [0.2.0](https://github.com/yabbadabbadev/pepito/compare/v0.1.1...v0.2.0) (2026-09-02)
+
+
+### Features
+
+* framework-agnostic core + subpath adapters for /react, /vue, /svelte ([#9](https://github.com/yabbadabbadev/pepito/issues/9)) ([2a1ab74](https://github.com/yabbadabbadev/pepito/commit/2a1ab74274d8c8ac03980f368cde8260c7330f3a))
+
 ## [0.1.1](https://github.com/yabbadabbadev/pepito/compare/v0.1.0...v0.1.1) (2026-08-20)
 
 Nothing changed for consumers of this package: no new API, no fix, no

package/README.md

@@ -8,21 +8,20 @@ matchers to query it.
 
 ## 1. Install and start
 
-`react`, `react-dom`, `vitest`, `msw` and `vitest-browser-react` are
-**peerDependencies**: install them if your project doesn't already have
-them.
+`vitest` and `msw` are **peerDependencies**: install them if your project
+doesn't already have them.
+
+### Core (any framework)
+
+The core — `setupNetwork`, matchers, request descriptors, `network.log()` —
+works without any framework adapter.
 
 ```bash
-npm i -D @yabbadabbadev/pepito msw vitest-browser-react
+npm i -D @yabbadabbadev/pepito msw
 npx msw init public --save
 ```
 
-`npx msw init public --save` generates the service worker MSW needs in
-browser mode (`public/mockServiceWorker.js`); it's a one-off, not a
-day-to-day step — it's only repeated when upgrading MSW's version.
-
-Call `setupNetwork` once, in a `setupFiles` file of `vitest.config` — never
-inside a test:
+Call `setupNetwork` once, in a `setupFiles` file of `vitest.config`:
 
 ```ts
 // vitest.setup.ts
@@ -42,6 +41,70 @@ export default defineConfig({
 })
 ```
 
+### React
+
+```bash
+npm i -D @yabbadabbadev/pepito msw vitest-browser-react
+npx msw init public --save
+```
+
+```tsx
+import { mount } from '@yabbadabbadev/pepito/react'
+import { App } from '../src/App'
+
+const screen = await mount(<App />, { path: '/products' })
+```
+
+### Vue
+
+```bash
+npm i -D @yabbadabbadev/pepito msw vitest-browser-vue
+npx msw init public --save
+```
+
+```ts
+import { mount } from '@yabbadabbadev/pepito/vue'
+import App from '../src/App.vue'
+
+const screen = await mount(App, { path: '/products' })
+```
+
+### Svelte
+
+```bash
+npm i -D @yabbadabbadev/pepito msw vitest-browser-svelte
+npx msw init public --save
+```
+
+```ts
+import { mount } from '@yabbadabbadev/pepito/svelte'
+import App from '../src/App.svelte'
+
+const screen = await mount(App, { path: '/products' })
+```
+
+### Custom framework adapter
+
+If you use a framework without an official subpath (Lit, Preact, Angular,
+Solid, …), build your own adapter with `mountCore`:
+
+```ts
+import { render } from 'vitest-browser-lit'
+import { mountCore } from '@yabbadabbadev/pepito'
+
+export function mount(
+  component: unknown,
+  options?: Parameters<typeof mountCore>[2],
+) {
+  return mountCore(component, (c) => render(c as any), options)
+}
+```
+
+`mountCore` applies `pushState` for routing and registers test-specific
+MSW handlers before calling your `render` function. Its return type is
+generic: it infers the full typed result from whatever your `render`
+returns.
+
 `setupNetwork`'s second argument passes straight through to
 `worker.start()`, with no wrapper of its own — for example, to make a
 request with no handler fail the test instead of just warning on the
@@ -55,23 +118,26 @@ import { handlers } from './handlers'
 setupNetwork(handlers, { onUnhandledRequest: 'error' })
 ```
 
-Importing anything from `pepito` — here, `setupNetwork` — already brings the
-network matchers along as `expect` types: there's no separate type
-registration. If your test `tsconfig` doesn't include the setup file, `tsc`
-won't see the augmentation and `expect(...).toHaveBeenRequested()` will
-raise `TS2339` even though the test passes at runtime.
+Importing anything from `pepito` — even just `setupNetwork` — already
+brings the network matchers along as `expect` types: there's no separate
+type registration. If your test `tsconfig` doesn't include the setup
+file, `tsc` won't see the augmentation and
+`expect(...).toHaveBeenRequested()` will raise `TS2339` even though the
+test passes at runtime.
 
 ## 2. Mount the application
 
-`mount` mounts with `vitest-browser-react` and returns its `screen`
-unwrapped. It requires `setupNetwork` to have run first (section 1), **even
-for a test with no network**: the coupling is deliberate — `mount` also
-installs URL and storage cleanup between tests, not just the network — and
-if it's missing, it fails immediately with a fix instruction.
+`mount` (from `@yabbadabbadev/pepito/react`) mounts with
+`vitest-browser-react` and returns its `screen` unwrapped. It requires
+`setupNetwork` to have run first (section 1), **even for a test with no
+network**: the coupling is deliberate — `mount` also installs URL and
+storage cleanup between tests, not just the network — and if it's missing,
+it fails immediately with a fix instruction.
 
 ```tsx
 import { http, HttpResponse } from 'msw'
-import { mount, get } from '@yabbadabbadev/pepito'
+import { get } from '@yabbadabbadev/pepito'
+import { mount } from '@yabbadabbadev/pepito/react'
 import { App } from '../src/App'
 import { ProductListMother } from '../test/mothers/product-list-mother'
 
@@ -102,7 +168,7 @@ route, and `setupNetwork()` undoes them afterwards in its `afterEach`.
 Neither option is required — `mount(<App />)` on its own just mounts:
 
 ```tsx
-import { mount } from '@yabbadabbadev/pepito'
+import { mount } from '@yabbadabbadev/pepito/react'
 import { App } from '../src/App'
 
 test('mounts with no path or network of its own', async () => {

package/dist/index.d.ts

@@ -3,5 +3,5 @@ import './matcher-types';
 export * from './request-descriptors';
 export { setupNetwork } from './setup-network';
 export { network } from './network';
-export { mount } from './mount';
-export type { MountOptions } from './mount';
+export { mountCore } from './mount-core';
+export type { MountOptions, MountResult } from './mount-core';

package/dist/index.js

@@ -3,4 +3,4 @@ import './matcher-types';
 export * from './request-descriptors';
 export { setupNetwork } from './setup-network';
 export { network } from './network';
-export { mount } from './mount';
+export { mountCore } from './mount-core';

package/dist/mount-core.d.ts

@@ -0,0 +1,38 @@
+import type { RequestHandler } from 'msw';
+/** Options for {@link mountCore}. Both are optional. */
+export interface MountOptions {
+    /**
+     * Same-origin URI starting with `/`, query and hash included (for example
+     * `/products?filter=bread#detail`). Applied with `history.pushState`
+     * before render so the application's router reads it on mount.
+     */
+    path?: string;
+    /**
+     * MSW handlers of this test's own. Installed with `worker.use()` before
+     * render, so they take priority over the suite's for the same route, and
+     * `setupNetwork()` undoes them in its `afterEach`.
+     */
+    network?: RequestHandler[];
+}
+/** The minimal contract every `vitest-browser-*` render result satisfies. */
+export interface MountResult {
+    container: Element;
+}
+/**
+ * Framework-agnostic mount: applies `pushState` (if `path`), registers
+ * test-specific MSW handlers (if `network`), then calls `render(component)`.
+ *
+ * The `render` function is provided by the caller — each framework subpath
+ * (`/react`, `/vue`, `/svelte`) wraps this with its own `vitest-browser-*`
+ * render. See the "Custom framework adapter" section in the README for
+ * building your own.
+ *
+ * @example
+ * ```ts
+ * import { render } from 'vitest-browser-lit'
+ * import { mountCore } from '@yabbadabbadev/pepito'
+ *
+ * const screen = await mountCore(MyComponent, (c) => render(c as any))
+ * ```
+ */
+export declare function mountCore<T extends MountResult>(component: unknown, render: (component: unknown) => T | Promise<T>, options?: MountOptions): Promise<T>;

package/dist/mount-core.js

@@ -0,0 +1,44 @@
+import { requireNetworkContext } from './network-singleton';
+function isSameOriginPath(path) {
+    if (!path.startsWith('/'))
+        return false;
+    try {
+        return new URL(path, location.origin).origin === location.origin;
+    }
+    catch {
+        return false;
+    }
+}
+/**
+ * Framework-agnostic mount: applies `pushState` (if `path`), registers
+ * test-specific MSW handlers (if `network`), then calls `render(component)`.
+ *
+ * The `render` function is provided by the caller — each framework subpath
+ * (`/react`, `/vue`, `/svelte`) wraps this with its own `vitest-browser-*`
+ * render. See the "Custom framework adapter" section in the README for
+ * building your own.
+ *
+ * @example
+ * ```ts
+ * import { render } from 'vitest-browser-lit'
+ * import { mountCore } from '@yabbadabbadev/pepito'
+ *
+ * const screen = await mountCore(MyComponent, (c) => render(c as any))
+ * ```
+ */
+export async function mountCore(component, render, options = {}) {
+    const { worker } = requireNetworkContext('mountCore');
+    const { path, network: testHandlers } = options;
+    if (path !== undefined && !isSameOriginPath(path)) {
+        throw new Error(`pepito: path must be a same-origin URI that starts with '/'; ` +
+            `received: ${path}. A different origin is mocked in the MSW ` +
+            `handlers, not in the mount.`);
+    }
+    if (path !== undefined) {
+        history.pushState({}, '', path);
+    }
+    if (testHandlers !== undefined && testHandlers.length > 0) {
+        worker.use(...testHandlers);
+    }
+    return await Promise.resolve(render(component));
+}

package/dist/network.d.ts

@@ -34,7 +34,7 @@ export declare const network: {
      * absence of future traffic: the same practical blind window remains as
      * for the rest of the mechanism — a request fired in the same tick as the
      * call, before crossing the real round trip to the service worker (1–6 ms
-     * measured; see `.claude/docs/references/measured-foundations.md`), may
+     * measured; see `.agents/docs/references/measured-foundations.md`), may
      * not be in the registry yet when `network.idle()` resolves.
      *
      * Meant for visual regression: capturing right after mounting, with a
@@ -42,7 +42,7 @@ export declare const network: {
      * native stabilizer of `toMatchScreenshot` doesn't catch it because
      * "Loading…" is also a capture that stops changing between frames
      * (measured: 0 failures across 17 local runs + 3 in CI waiting for calm
-     * this way — see `.claude/docs/references/measured-foundations.md`).
+     * this way — see `.agents/docs/references/measured-foundations.md`).
      * Before this, the only public way to wait for calm on its own was to
      * divert `expect.network().toHaveNoUnhandledRequests()` from its actual
      * purpose (detecting traffic without a handler). It works just as well as a

package/dist/network.js

@@ -45,7 +45,7 @@ export const network = {
      * absence of future traffic: the same practical blind window remains as
      * for the rest of the mechanism — a request fired in the same tick as the
      * call, before crossing the real round trip to the service worker (1–6 ms
-     * measured; see `.claude/docs/references/measured-foundations.md`), may
+     * measured; see `.agents/docs/references/measured-foundations.md`), may
      * not be in the registry yet when `network.idle()` resolves.
      *
      * Meant for visual regression: capturing right after mounting, with a
@@ -53,7 +53,7 @@ export const network = {
      * native stabilizer of `toMatchScreenshot` doesn't catch it because
      * "Loading…" is also a capture that stops changing between frames
      * (measured: 0 failures across 17 local runs + 3 in CI waiting for calm
-     * this way — see `.claude/docs/references/measured-foundations.md`).
+     * this way — see `.agents/docs/references/measured-foundations.md`).
      * Before this, the only public way to wait for calm on its own was to
      * divert `expect.network().toHaveNoUnhandledRequests()` from its actual
      * purpose (detecting traffic without a handler). It works just as well as a

package/dist/react.d.ts

@@ -0,0 +1,28 @@
+import type { ReactElement } from 'react';
+import { type RenderResult } from 'vitest-browser-react';
+import type { MountOptions } from './mount-core';
+/**
+ * Mounts a React element with `vitest-browser-react`, optionally on a real
+ * document route and with test-specific MSW handlers.
+ *
+ * `path`, if given, has to be a same-origin URI starting with `/`: it's
+ * applied with `history.pushState` BEFORE render because the application's
+ * `BrowserRouter` reads the URL on mount and only listens to `popstate`
+ * afterwards. The URI can carry query and hash: they flow through the router
+ * the same as the path. `setupNetwork()` restores the original URL in its
+ * `afterEach`, so every test starts from the same route regardless of what
+ * the previous one mounted.
+ *
+ * `network`, if given, is registered with `worker.use()` before render: its
+ * handlers take priority over the suite's for this request, with the same
+ * resolution rules as MSW.
+ *
+ * @example
+ * ```tsx
+ * import { mount } from '@yabbadabbadev/pepito/react'
+ *
+ * const screen = await mount(<App />, { path: '/products?filter=bread' })
+ * await expect.element(screen.getByText('filter: bread')).toBeVisible()
+ * ```
+ */
+export declare function mount(ui: ReactElement, options?: MountOptions): Promise<RenderResult>;

package/dist/react.js

@@ -0,0 +1,29 @@
+import { render } from 'vitest-browser-react';
+import { mountCore } from './mount-core';
+/**
+ * Mounts a React element with `vitest-browser-react`, optionally on a real
+ * document route and with test-specific MSW handlers.
+ *
+ * `path`, if given, has to be a same-origin URI starting with `/`: it's
+ * applied with `history.pushState` BEFORE render because the application's
+ * `BrowserRouter` reads the URL on mount and only listens to `popstate`
+ * afterwards. The URI can carry query and hash: they flow through the router
+ * the same as the path. `setupNetwork()` restores the original URL in its
+ * `afterEach`, so every test starts from the same route regardless of what
+ * the previous one mounted.
+ *
+ * `network`, if given, is registered with `worker.use()` before render: its
+ * handlers take priority over the suite's for this request, with the same
+ * resolution rules as MSW.
+ *
+ * @example
+ * ```tsx
+ * import { mount } from '@yabbadabbadev/pepito/react'
+ *
+ * const screen = await mount(<App />, { path: '/products?filter=bread' })
+ * await expect.element(screen.getByText('filter: bread')).toBeVisible()
+ * ```
+ */
+export async function mount(ui, options) {
+    return mountCore(ui, (c) => render(c), options);
+}

package/dist/setup-network.d.ts

@@ -4,7 +4,7 @@ import type { SetupWorker, StartOptions } from 'msw/browser';
  * Starts the MSW worker and hooks up the traffic registry, leaving the
  * between-test cleanup installed in `afterEach`: registry, hot handlers,
  * document URL and origin storage all return to their pre-test state
- * (measured — see `.claude/docs/references/measured-foundations.md`).
+ * (measured — see `.agents/docs/references/measured-foundations.md`).
  *
  * Called once per test file, typically from a `setupFiles` entry in
  * `vitest.config`, never from inside a test.
@@ -14,7 +14,7 @@ import type { SetupWorker, StartOptions } from 'msw/browser';
  * survives between tests — see `clearOriginStorage` in storage-cleanup.ts.
  * A cookie without an explicit `path` does get cleared, including one set
  * while `mount` was simulating being on a nested route (measured — see
- * `.claude/docs/references/measured-foundations.md`).
+ * `.agents/docs/references/measured-foundations.md`).
  *
  * @param handlers - Initial MSW handlers, the same ones `setupWorker` would take.
  * @param startOptions - Passed through to `worker.start()` as-is; no wrapper of its own.

package/dist/setup-network.js

@@ -8,7 +8,7 @@ import { resetTraffic } from './traffic-registry';
  * Starts the MSW worker and hooks up the traffic registry, leaving the
  * between-test cleanup installed in `afterEach`: registry, hot handlers,
  * document URL and origin storage all return to their pre-test state
- * (measured — see `.claude/docs/references/measured-foundations.md`).
+ * (measured — see `.agents/docs/references/measured-foundations.md`).
  *
  * Called once per test file, typically from a `setupFiles` entry in
  * `vitest.config`, never from inside a test.
@@ -18,7 +18,7 @@ import { resetTraffic } from './traffic-registry';
  * survives between tests — see `clearOriginStorage` in storage-cleanup.ts.
  * A cookie without an explicit `path` does get cleared, including one set
  * while `mount` was simulating being on a nested route (measured — see
- * `.claude/docs/references/measured-foundations.md`).
+ * `.agents/docs/references/measured-foundations.md`).
  *
  * @param handlers - Initial MSW handlers, the same ones `setupWorker` would take.
  * @param startOptions - Passed through to `worker.start()` as-is; no wrapper of its own.

package/dist/storage-cleanup.d.ts

@@ -3,7 +3,7 @@
  * land on the same worker: `localStorage`, `sessionStorage` and cookies
  * belong to the origin, not the document, so they survive per-file
  * isolation (measured — see
- * `.claude/docs/references/measured-foundations.md`).
+ * `.agents/docs/references/measured-foundations.md`).
  *
  * Each cookie is expired twice per name: once with `path=/` (the one most
  * application code sets) and once with no `path` attribute, in case one was
@@ -16,7 +16,7 @@
  *
  * Measured that it doesn't, in this harness (Chromium via Playwright,
  * `vitest@4.1.10`): the order has no observable effect today — full
- * evidence in `.claude/docs/references/measured-foundations.md`. The order
+ * evidence in `.agents/docs/references/measured-foundations.md`. The order
  * is kept anyway, at no cost, in case some future runner or browser does
  * follow the simulated URL.
  *

package/dist/storage-cleanup.js

@@ -3,7 +3,7 @@
  * land on the same worker: `localStorage`, `sessionStorage` and cookies
  * belong to the origin, not the document, so they survive per-file
  * isolation (measured — see
- * `.claude/docs/references/measured-foundations.md`).
+ * `.agents/docs/references/measured-foundations.md`).
  *
  * Each cookie is expired twice per name: once with `path=/` (the one most
  * application code sets) and once with no `path` attribute, in case one was
@@ -16,7 +16,7 @@
  *
  * Measured that it doesn't, in this harness (Chromium via Playwright,
  * `vitest@4.1.10`): the order has no observable effect today — full
- * evidence in `.claude/docs/references/measured-foundations.md`. The order
+ * evidence in `.agents/docs/references/measured-foundations.md`. The order
  * is kept anyway, at no cost, in case some future runner or browser does
  * follow the simulated URL.
  *

package/dist/svelte.d.ts

@@ -0,0 +1,23 @@
+import { render, type RenderResult } from 'vitest-browser-svelte';
+import type { MountOptions } from './mount-core';
+/**
+ * Mounts a Svelte component with `vitest-browser-svelte`, optionally on a
+ * real document route and with test-specific MSW handlers.
+ *
+ * `path`, if given, has to be a same-origin URI starting with `/`: it's
+ * applied with `history.pushState` BEFORE render so the application's
+ * router reads it on mount. `setupNetwork()` restores the original URL
+ * in its `afterEach`.
+ *
+ * `network`, if given, is registered with `worker.use()` before render.
+ *
+ * @example
+ * ```ts
+ * import { mount } from '@yabbadabbadev/pepito/svelte'
+ * import App from './App.svelte'
+ *
+ * const screen = await mount(App, { path: '/products' })
+ * await expect.element(screen.getByText('Products')).toBeVisible()
+ * ```
+ */
+export declare function mount(component: Parameters<typeof render>[0], options?: MountOptions): Promise<RenderResult<any>>;

package/dist/svelte.js

@@ -0,0 +1,25 @@
+import { render } from 'vitest-browser-svelte';
+import { mountCore } from './mount-core';
+/**
+ * Mounts a Svelte component with `vitest-browser-svelte`, optionally on a
+ * real document route and with test-specific MSW handlers.
+ *
+ * `path`, if given, has to be a same-origin URI starting with `/`: it's
+ * applied with `history.pushState` BEFORE render so the application's
+ * router reads it on mount. `setupNetwork()` restores the original URL
+ * in its `afterEach`.
+ *
+ * `network`, if given, is registered with `worker.use()` before render.
+ *
+ * @example
+ * ```ts
+ * import { mount } from '@yabbadabbadev/pepito/svelte'
+ * import App from './App.svelte'
+ *
+ * const screen = await mount(App, { path: '/products' })
+ * await expect.element(screen.getByText('Products')).toBeVisible()
+ * ```
+ */
+export async function mount(component, options) {
+    return mountCore(component, (c) => render(c), options);
+}

package/dist/traffic-registry.d.ts

@@ -1,7 +1,7 @@
 /**
  * Traffic entry as it lives in the registry while the test runs: `body` and
  * `responseBody` are promises because they can only be read once (measured
- * — see `.claude/docs/references/measured-foundations.md`) and are stored
+ * — see `.agents/docs/references/measured-foundations.md`) and are stored
  * without awaiting, so as not to block the `request:start` listener that
  * opens them.
  */
@@ -26,7 +26,7 @@ export interface ResolvedRequest extends Omit<ObservedRequest, 'body' | 'respons
 }
 /**
  * Opens a traffic entry with what can only be read at `request:start`
- * (measured — see `.claude/docs/references/measured-foundations.md`) and
+ * (measured — see `.agents/docs/references/measured-foundations.md`) and
  * marks it in flight.
  * `watchNetwork` (msw-events.ts) is the only caller.
  */
@@ -73,7 +73,7 @@ export declare const QUIESCENCE_TIMEOUT_MS = 4000;
  * in the same tick as the call hasn't yet crossed the real round trip to
  * the service worker that registers its `request:start`, so this function
  * reads the counter at zero by construction, not by actual absence (see
- * `.claude/docs/references/measured-foundations.md`). Whoever needs to
+ * `.agents/docs/references/measured-foundations.md`). Whoever needs to
  * assert an absence or count with precision must go through
  * `snapshotAfterIdle` in `pepito/src/matchers.ts`, which closes that window
  * with a two-observation stability condition; calling this function

package/dist/traffic-registry.js

@@ -6,7 +6,7 @@ const traffic = new Map();
 const pending = new Set();
 /**
  * Opens a traffic entry with what can only be read at `request:start`
- * (measured — see `.claude/docs/references/measured-foundations.md`) and
+ * (measured — see `.agents/docs/references/measured-foundations.md`) and
  * marks it in flight.
  * `watchNetwork` (msw-events.ts) is the only caller.
  */
@@ -99,7 +99,7 @@ export const QUIESCENCE_TIMEOUT_MS = 4000;
  * in the same tick as the call hasn't yet crossed the real round trip to
  * the service worker that registers its `request:start`, so this function
  * reads the counter at zero by construction, not by actual absence (see
- * `.claude/docs/references/measured-foundations.md`). Whoever needs to
+ * `.agents/docs/references/measured-foundations.md`). Whoever needs to
  * assert an absence or count with precision must go through
  * `snapshotAfterIdle` in `pepito/src/matchers.ts`, which closes that window
  * with a two-observation stability condition; calling this function

package/dist/vue.d.ts

@@ -0,0 +1,23 @@
+import { render, type RenderResult } from 'vitest-browser-vue';
+import type { MountOptions } from './mount-core';
+/**
+ * Mounts a Vue component with `vitest-browser-vue`, optionally on a real
+ * document route and with test-specific MSW handlers.
+ *
+ * `path`, if given, has to be a same-origin URI starting with `/`: it's
+ * applied with `history.pushState` BEFORE render so the application's
+ * router reads it on mount. `setupNetwork()` restores the original URL
+ * in its `afterEach`.
+ *
+ * `network`, if given, is registered with `worker.use()` before render.
+ *
+ * @example
+ * ```ts
+ * import { mount } from '@yabbadabbadev/pepito/vue'
+ * import App from './App.vue'
+ *
+ * const screen = await mount(App, { path: '/products' })
+ * await expect.element(screen.getByText('Products')).toBeVisible()
+ * ```
+ */
+export declare function mount(component: Parameters<typeof render>[0], options?: MountOptions): Promise<RenderResult<Record<string, unknown>>>;

package/dist/vue.js

@@ -0,0 +1,25 @@
+import { render } from 'vitest-browser-vue';
+import { mountCore } from './mount-core';
+/**
+ * Mounts a Vue component with `vitest-browser-vue`, optionally on a real
+ * document route and with test-specific MSW handlers.
+ *
+ * `path`, if given, has to be a same-origin URI starting with `/`: it's
+ * applied with `history.pushState` BEFORE render so the application's
+ * router reads it on mount. `setupNetwork()` restores the original URL
+ * in its `afterEach`.
+ *
+ * `network`, if given, is registered with `worker.use()` before render.
+ *
+ * @example
+ * ```ts
+ * import { mount } from '@yabbadabbadev/pepito/vue'
+ * import App from './App.vue'
+ *
+ * const screen = await mount(App, { path: '/products' })
+ * await expect.element(screen.getByText('Products')).toBeVisible()
+ * ```
+ */
+export async function mount(component, options) {
+    return mountCore(component, (c) => render(c), options);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yabbadabbadev/pepito",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "Network test utilities for Vitest browser mode: application mounting and matchers over the traffic observed by MSW",
   "type": "module",
   "license": "MIT",
@@ -26,6 +26,18 @@
     ".": {
       "types": "./dist/index.d.ts",
       "default": "./dist/index.js"
+    },
+    "./react": {
+      "types": "./dist/react.d.ts",
+      "default": "./dist/react.js"
+    },
+    "./vue": {
+      "types": "./dist/vue.d.ts",
+      "default": "./dist/vue.js"
+    },
+    "./svelte": {
+      "types": "./dist/svelte.d.ts",
+      "default": "./dist/svelte.js"
     }
   },
   "files": [
@@ -51,13 +63,11 @@
   },
   "peerDependencies": {
     "msw": "^2.15.0",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "vitest": "^4.0.0",
-    "vitest-browser-react": "^2.0.0"
+    "vitest": "^4.0.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.39.5",
+    "@sveltejs/vite-plugin-svelte": "^7.3.0",
     "@types/react": "^19.2.18",
     "@types/react-dom": "^19.2.4",
     "@typescript-eslint/eslint-plugin": "^8.67.0",
@@ -80,9 +90,13 @@
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
     "react-router": "^8.3.0",
+    "svelte": "^5.57.0",
     "typescript": "^6.0.3",
     "vitest": "^4.1.10",
-    "vitest-browser-react": "^2.2.0"
+    "vitest-browser-react": "^2.2.0",
+    "vitest-browser-svelte": "^3.0.0",
+    "vitest-browser-vue": "^2.1.0",
+    "vue": "^3.5.42"
   },
   "msw": {
     "workerDirectory": [

package/dist/mount.d.ts

@@ -1,45 +0,0 @@
-import type { ReactElement } from 'react';
-import type { RequestHandler } from 'msw';
-import { type RenderResult } from 'vitest-browser-react';
-/** Options for {@link mount}. Both are optional: `mount(<App />)` alone just mounts. */
-export interface MountOptions {
-    /**
-     * Same-origin URI starting with `/`, query and hash included (for example
-     * `/products?filter=bread#detail`). Applied with `history.pushState`
-     * before render so the application's router reads it on mount.
-     */
-    path?: string;
-    /**
-     * MSW handlers of this test's own. Installed with `worker.use()` before
-     * render, so they take priority over the suite's for the same route, and
-     * `setupNetwork()` undoes them in its `afterEach`.
-     */
-    network?: RequestHandler[];
-}
-/**
- * Mounts `ui` with `vitest-browser-react`, optionally on a real document
- * route and with test-specific MSW handlers.
- *
- * `path`, if given, has to be a same-origin URI starting with `/`: it's
- * applied with `history.pushState` BEFORE render because the application's
- * `BrowserRouter` reads the URL on mount and only listens to `popstate`
- * afterwards (measured — see
- * `.claude/docs/references/measured-foundations.md`). The URI can carry
- * query and hash: they flow through the router the same as the path.
- * `setupNetwork()` restores the original URL in its `afterEach`, so every
- * test starts from the same route regardless of what the previous one
- * mounted.
- *
- * `network`, if given, is registered with `worker.use()` before render: its
- * handlers take priority over the suite's for this request, with the same
- * resolution rules as MSW.
- *
- * @example
- * ```tsx
- * import { mount } from '@yabbadabbadev/pepito'
- *
- * const screen = await mount(<App />, { path: '/products?filter=bread' })
- * await expect.element(screen.getByText('filter: bread')).toBeVisible()
- * ```
- */
-export declare function mount(ui: ReactElement, options?: MountOptions): Promise<RenderResult>;

package/dist/mount.js

@@ -1,61 +0,0 @@
-import { render } from 'vitest-browser-react';
-import { requireNetworkContext } from './network-singleton';
-// The '/' prefix alone isn't enough: '//evil.com' is protocol-relative and
-// WHATWG also treats '/\' as introducing an authority, so both would pass
-// it and pushState would be the one throwing the raw SecurityError further
-// down.
-function isSameOriginPath(path) {
-    if (!path.startsWith('/'))
-        return false;
-    try {
-        return new URL(path, location.origin).origin === location.origin;
-    }
-    catch {
-        return false;
-    }
-}
-/**
- * Mounts `ui` with `vitest-browser-react`, optionally on a real document
- * route and with test-specific MSW handlers.
- *
- * `path`, if given, has to be a same-origin URI starting with `/`: it's
- * applied with `history.pushState` BEFORE render because the application's
- * `BrowserRouter` reads the URL on mount and only listens to `popstate`
- * afterwards (measured — see
- * `.claude/docs/references/measured-foundations.md`). The URI can carry
- * query and hash: they flow through the router the same as the path.
- * `setupNetwork()` restores the original URL in its `afterEach`, so every
- * test starts from the same route regardless of what the previous one
- * mounted.
- *
- * `network`, if given, is registered with `worker.use()` before render: its
- * handlers take priority over the suite's for this request, with the same
- * resolution rules as MSW.
- *
- * @example
- * ```tsx
- * import { mount } from '@yabbadabbadev/pepito'
- *
- * const screen = await mount(<App />, { path: '/products?filter=bread' })
- * await expect.element(screen.getByText('filter: bread')).toBeVisible()
- * ```
- */
-export async function mount(ui, options = {}) {
-    const { worker } = requireNetworkContext('mount');
-    const { path, network: testHandlers } = options;
-    if (path !== undefined && !isSameOriginPath(path)) {
-        throw new Error(`pepito: path must be a same-origin URI that starts with '/'; ` +
-            `received: ${path}. A different origin is mocked in the MSW ` +
-            `handlers, not in the mount.`);
-    }
-    // Before render: the app's router reads the URL on mount and only
-    // listens to popstate afterwards. See
-    // docs/knowledge/url-navegacion-browser-mode.md.
-    if (path !== undefined) {
-        history.pushState({}, '', path);
-    }
-    if (testHandlers !== undefined && testHandlers.length > 0) {
-        worker.use(...testHandlers);
-    }
-    return render(ui);
-}