@remix-run/test 0.1.0 → 0.2.0

package/dist/lib/runtime.js

@@ -0,0 +1,2 @@
+// https://bun.com/docs/guides/util/detect-bun
+export const IS_BUN = typeof process.versions.bun === 'string';

package/dist/lib/ts-transform.d.ts

@@ -0,0 +1,4 @@
+export declare function transformTypeScript(source: string, filePath: string): Promise<{
+    code: string;
+}>;
+//# sourceMappingURL=ts-transform.d.ts.map

package/dist/lib/ts-transform.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ts-transform.d.ts","sourceRoot":"","sources":["../../src/lib/ts-transform.ts"],"names":[],"mappings":"AAmBA,wBAAsB,mBAAmB,CACvC,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,MAAM,GACf,OAAO,CAAC;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,CAAC,CAa3B"}

package/dist/lib/ts-transform.js

@@ -0,0 +1,29 @@
+import { transform } from 'esbuild';
+import { getTsconfig } from 'get-tsconfig';
+import * as path from 'node:path';
+const tsconfigCache = new Map();
+/*
+ * Transform a TypeScript file to JavaScript using esbuild with an inline
+ * source map and no minification. Used by the coverage ESM loader hook (so V8
+ * instruments readable JS), the coverage collector (so byte offsets can be
+ * re-derived and mapped back to TypeScript lines), and the browser harness
+ * server (so the bytes V8 sees in the browser match what the collector
+ * re-derives). Identical inputs must produce identical outputs across all
+ * call sites or coverage offsets won't line up.
+ *
+ * Compiler options (notably JSX) are taken from the nearest `tsconfig.json`
+ * walking up from the file's directory, so each project picks up its own
+ * `jsxImportSource` etc. Discovery results are cached by directory.
+ */
+export async function transformTypeScript(source, filePath) {
+    let loader = filePath.endsWith('.tsx') ? 'tsx' : 'ts';
+    let tsConfig = getTsconfig(path.dirname(filePath), 'tsconfig.json', tsconfigCache);
+    let result = await transform(source, {
+        loader,
+        sourcemap: 'inline',
+        sourcesContent: true,
+        sourcefile: filePath,
+        tsconfigRaw: { compilerOptions: tsConfig?.config.compilerOptions ?? {} },
+    });
+    return { code: result.code };
+}

package/dist/lib/worker-e2e.js

@@ -1,19 +1,18 @@
 import { workerData, parentPort } from 'node:worker_threads';
-import { tsImport } from 'tsx/esm/api';
-import { createServer } from "./e2e-server.js";
 import { runTests } from "./executor.js";
+import { importModule } from "./import-module.js";
 import { getBrowserLauncher, getPlaywrightLaunchOptions, getPlaywrightPageOptions, } from "./playwright.js";
 try {
-    await tsImport(workerData.file, import.meta.url);
+    await importModule(workerData.file, import.meta);
     let launcher = await getBrowserLauncher(workerData.playwrightUseOpts);
     let opts = getPlaywrightLaunchOptions(workerData.playwrightUseOpts);
     let browser = await launcher.launch(opts);
     try {
         let results = await runTests({
             browser,
-            createServer,
             open: workerData.open,
             playwrightPageOptions: getPlaywrightPageOptions(workerData.playwrightUseOpts),
+            coverage: workerData.coverage,
         });
         parentPort.postMessage(results);
         if (workerData.open) {
@@ -24,6 +23,7 @@ try {
     finally {
         await browser.close();
     }
+    process.exit(0);
 }
 catch (e) {
     let results = {
@@ -45,4 +45,5 @@ catch (e) {
         ],
     };
     parentPort.postMessage(results);
+    process.exit(0);
 }

package/dist/lib/worker.js

@@ -1,10 +1,37 @@
-import { workerData, parentPort } from 'node:worker_threads';
-import { tsImport } from 'tsx/esm/api';
+var __rewriteRelativeImportExtension = (this && this.__rewriteRelativeImportExtension) || function (path, preserveJsx) {
+    if (typeof path === "string" && /^\.\.?\//.test(path)) {
+        return path.replace(/\.(tsx)$|((?:\.d)?)((?:\.[^./]+?)?)\.([cm]?)ts$/i, function (m, tsx, d, ext, cm) {
+            return tsx ? preserveJsx ? ".jsx" : ".js" : d && (!ext || !cm) ? m : (d + ext + "." + cm.toLowerCase() + "js");
+        });
+    }
+    return path;
+};
+import * as mod from 'node:module';
+import * as path from 'node:path';
+import { parentPort, workerData } from 'node:worker_threads';
 import { runTests } from "./executor.js";
+import { importModule } from "./import-module.js";
+import { IS_BUN } from "./runtime.js";
+import { IS_RUNNING_FROM_SRC } from "./config.js";
 try {
-    await tsImport(workerData.file, import.meta.url);
+    // When coverage is enabled in Node, we use a coverage-friendly TypeScript loader which
+    // replaces tsx's minified transformation with a non-minified esbuild transform
+    // so V8 coverage byte offsets align with readable source lines. This hook runs
+    // before the inherited tsx hook (hooks are LIFO), so it intercepts .ts imports and
+    // short-circuits before tsx transforms them.
+    if (workerData.coverage && !IS_BUN) {
+        // Ensure we load the right file whether we're running in the monorepo (TS) or
+        // from a published package (JS)
+        let ext = IS_RUNNING_FROM_SRC ? '.ts' : '.js';
+        mod.register(new URL(`./coverage-loader${ext}`, import.meta.url), import.meta.url);
+        await import(__rewriteRelativeImportExtension(workerData.file));
+    }
+    else {
+        await importModule(workerData.file, import.meta);
+    }
     let results = await runTests();
     parentPort.postMessage(results);
+    process.exit(0);
 }
 catch (e) {
     let results = {
@@ -26,4 +53,5 @@ catch (e) {
         ],
     };
     parentPort.postMessage(results);
+    process.exit(0);
 }

package/dist/test/coverage/fixture.d.ts

@@ -0,0 +1,5 @@
+export declare function add(a: number, b: number): number;
+export declare function classify(n: number): string;
+export declare function uncalledFunction(): string;
+export declare function greet(name?: string): string;
+//# sourceMappingURL=fixture.d.ts.map

package/dist/test/coverage/fixture.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fixture.d.ts","sourceRoot":"","sources":["../../../src/test/coverage/fixture.ts"],"names":[],"mappings":"AAKA,wBAAgB,GAAG,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAEhD;AAGD,wBAAgB,QAAQ,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,CAQ1C;AAGD,wBAAgB,gBAAgB,IAAI,MAAM,CAIzC;AAGD,wBAAgB,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAK3C"}

package/dist/test/coverage/fixture.js

@@ -0,0 +1,32 @@
+// This file exists solely to validate coverage accuracy.
+// Each function has a known expected coverage profile based on
+// which paths the associated tests exercise.
+// Fully covered — both statements and the single branch
+export function add(a, b) {
+    return a + b;
+}
+// Partially covered — only the `n > 0` branch is tested
+export function classify(n) {
+    if (n > 0) {
+        return 'positive';
+    }
+    else if (n < 0) {
+        return 'negative';
+    }
+    else {
+        return 'zero';
+    }
+}
+// Never called — 0% across the board
+export function uncalledFunction() {
+    let result = 'never';
+    result += ' reached';
+    return result;
+}
+// Partially covered — only the truthy `name` branch is tested
+export function greet(name) {
+    if (name) {
+        return `Hello, ${name}!`;
+    }
+    return 'Hello, stranger!';
+}

package/dist/test/coverage/test-browser.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=test-browser.d.ts.map

package/dist/test/coverage/test-browser.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"test-browser.d.ts","sourceRoot":"","sources":["../../../src/test/coverage/test-browser.ts"],"names":[],"mappings":""}

package/dist/test/coverage/test-browser.js

@@ -0,0 +1,24 @@
+import * as assert from '@remix-run/assert';
+import { describe, it } from "../../lib/framework.js";
+import { add, classify, greet } from "./fixture.js";
+// Expected coverage for coverage-fixture.ts (same as the server/e2e fixture
+// tests):
+//
+//   add             — 100% functions, statements, lines, branches
+//   classify        — function covered, but only the `n > 0` branch is hit
+//                     (the `n < 0` and `else` branches are uncovered)
+//   uncalledFunction — 0% across the board (never imported)
+//   greet           — function covered, but only the truthy `name` branch is hit
+//                     (the fallback `Hello, stranger!` line is uncovered)
+describe('browser coverage fixture', () => {
+    it('exercises some but not all code paths in the browser', () => {
+        assert.equal(add(2, 3), 5);
+        assert.equal(add(-1, 1), 0);
+        assert.equal(classify(42), 'positive');
+        assert.equal(classify(1), 'positive');
+        // deliberately NOT testing classify(-1) or classify(0)
+        assert.equal(greet('World'), 'Hello, World!');
+        // deliberately NOT testing greet() without an argument
+        // deliberately NOT importing or calling uncalledFunction
+    });
+});

package/dist/test/coverage/test-e2e.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=test-e2e.d.ts.map

package/dist/test/coverage/test-e2e.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"test-e2e.d.ts","sourceRoot":"","sources":["../../../src/test/coverage/test-e2e.ts"],"names":[],"mappings":""}

package/dist/test/coverage/test-e2e.js

@@ -0,0 +1,60 @@
+import * as assert from '@remix-run/assert';
+import { createTestServer } from '@remix-run/node-fetch-server/test';
+import * as fsp from 'node:fs/promises';
+import * as path from 'node:path';
+import { describe, it } from "../../lib/framework.js";
+import { transformTypeScript } from "../../lib/ts-transform.js";
+// Expected coverage for coverage/fixture.ts (same as the server fixture test):
+//
+//   add             — 100% functions, statements, lines, branches
+//   classify        — function covered, but only the `n > 0` branch is hit
+//   uncalledFunction — 0% across the board (never called)
+//   greet           — function covered, but only the truthy `name` branch is hit
+describe('e2e coverage fixture', () => {
+    it('exercises some but not all code paths in the browser', async (t) => {
+        // Compile the fixture TypeScript to browser-ready JS
+        let fixturePath = path.resolve(import.meta.dirname, './fixture.ts');
+        let fixtureSource = await fsp.readFile(fixturePath, 'utf-8');
+        let { code: fixtureJs } = await transformTypeScript(fixtureSource, fixturePath);
+        let handler = (req) => {
+            let url = new URL(req.url);
+            if (url.pathname === '/') {
+                return new Response([
+                    `<!doctype html>`,
+                    `<html>`,
+                    `<body>`,
+                    `  <div id="result"></div>`,
+                    `  <script type="module">`,
+                    `    import { add, classify, greet } from '/src/test/coverage/fixture.ts'`,
+                    `    // Exercise the same paths as the server fixture test:`,
+                    `    // - add: fully covered`,
+                    `    // - classify: only positive branch`,
+                    `    // - greet: only with a name`,
+                    `    // - uncalledFunction: never imported`,
+                    `    let results = [`,
+                    `      add(2, 3),`,
+                    `      add(-1, 1),`,
+                    `      classify(42),`,
+                    `      classify(1),`,
+                    `      greet('World'),`,
+                    `    ]`,
+                    `    document.getElementById('result').textContent = results.join(',')`,
+                    `  </script>`,
+                    `</body>`,
+                    `</html>`,
+                ].join('\n'), { headers: { 'Content-Type': 'text/html' } });
+            }
+            // Serve the compiled fixture at the path the import expects
+            if (url.pathname === '/src/test/coverage/fixture.ts') {
+                return new Response(fixtureJs, {
+                    headers: { 'Content-Type': 'application/javascript' },
+                });
+            }
+            return new Response('Not found', { status: 404 });
+        };
+        let page = await t.serve(await createTestServer(handler));
+        await page.goto('/');
+        let result = await page.locator('#result').textContent();
+        assert.equal(result, '5,0,positive,positive,Hello, World!');
+    });
+});

package/dist/test/coverage/test-unit.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=test-unit.d.ts.map

package/dist/test/coverage/test-unit.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"test-unit.d.ts","sourceRoot":"","sources":["../../../src/test/coverage/test-unit.ts"],"names":[],"mappings":""}

package/dist/test/coverage/test-unit.js

@@ -0,0 +1,27 @@
+import * as assert from '@remix-run/assert';
+import { describe, it } from "../../lib/framework.js";
+import { add, classify, greet } from "./fixture.js";
+// Expected coverage for coverage-fixture.ts:
+//
+//   add             — 100% functions, statements, lines, branches
+//   classify        — function covered, but only the `n > 0` branch is hit
+//                     (the `n < 0` and `else` branches are uncovered)
+//   uncalledFunction — 0% across the board (never imported)
+//   greet           — function covered, but only the truthy `name` branch is hit
+//                     (the fallback `Hello, stranger!` line is uncovered)
+describe('coverage/fixture.ts', () => {
+    it('add returns the sum', () => {
+        assert.equal(add(2, 3), 5);
+        assert.equal(add(-1, 1), 0);
+    });
+    it('classify identifies positive numbers only', () => {
+        assert.equal(classify(42), 'positive');
+        assert.equal(classify(1), 'positive');
+        // deliberately NOT testing classify(-1) or classify(0)
+    });
+    // deliberately NOT importing or calling uncalledFunction
+    it('greet with a name only', () => {
+        assert.equal(greet('World'), 'Hello, World!');
+        // deliberately NOT testing greet() without an argument
+    });
+});

package/dist/test/framework.test.browser.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=framework.test.browser.d.ts.map

package/dist/test/framework.test.browser.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"framework.test.browser.d.ts","sourceRoot":"","sources":["../../src/test/framework.test.browser.tsx"],"names":[],"mappings":""}

package/dist/test/framework.test.browser.js

@@ -0,0 +1,107 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@remix-run/ui/jsx-runtime";
+import decamelize from 'decamelize';
+import * as assert from '@remix-run/assert';
+import { describe, it } from '@remix-run/test';
+import { on } from '@remix-run/ui';
+import { render } from '@remix-run/ui/test';
+describe('Counter', () => {
+    function Counter(handle) {
+        let count = handle.props.count ?? 0;
+        return () => (_jsxs("div", { children: [
+                _jsx("h3", { children: "Counter" }), _jsxs("div", { children: [
+                        _jsx("button", { "data-action": "decrement", mix: [
+                                on('click', () => {
+                                    count--;
+                                    handle.update();
+                                }),
+                            ], children: "-" }), _jsx("span", { "data-testid": "count", style: { fontSize: '24px', minWidth: '2ch', textAlign: 'center' }, children: count }), _jsx("button", { "data-action": "increment", mix: [
+                                on('click', () => {
+                                    count++;
+                                    handle.update();
+                                }),
+                            ], children: "+" })
+                    ] })
+            ] }));
+    }
+    it('renders with initial count of 0 when not specified', (t) => {
+        let { $, cleanup } = render(_jsx(Counter, {}));
+        t.after(cleanup);
+        assert.equal(Number($('[data-testid="count"]').textContent), 0);
+    });
+    it('renders with a provided initial count', (t) => {
+        let { $, cleanup } = render(_jsx(Counter, { count: 5 }));
+        t.after(cleanup);
+        assert.equal(Number($('[data-testid="count"]').textContent), 5);
+    });
+    it('increments the count', async (t) => {
+        let { $, act, cleanup } = render(_jsx(Counter, {}));
+        t.after(cleanup);
+        await act(() => $('[data-action="increment"]')?.click());
+        assert.equal(Number($('[data-testid="count"]').textContent), 1);
+        await act(() => $('[data-action="increment"]')?.click());
+        assert.equal(Number($('[data-testid="count"]').textContent), 2);
+        await act(() => $('[data-action="increment"]')?.click());
+        assert.equal(Number($('[data-testid="count"]').textContent), 3);
+    });
+    it('decrements the count', async (t) => {
+        let { $, act, cleanup } = render(_jsx(Counter, { count: 3 }));
+        t.after(cleanup);
+        await act(() => $('[data-action="decrement"]')?.click());
+        assert.equal(Number($('[data-testid="count"]').textContent), 2);
+        await act(() => $('[data-action="decrement"]')?.click());
+        assert.equal(Number($('[data-testid="count"]').textContent), 1);
+        await act(() => $('[data-action="decrement"]')?.click());
+        assert.equal(Number($('[data-testid="count"]').textContent), 0);
+    });
+});
+describe('FieldLabel (using decamelize)', () => {
+    // Demonstrates that ESM third-party libraries are importable from test modules
+    function FieldLabel(_handle) {
+        return (props) => (_jsx("span", { "data-testid": "label", children: decamelize(props.name, { separator: ' ' }) }));
+    }
+    it('renders a single word unchanged', (t) => {
+        let { $, cleanup } = render(_jsx(FieldLabel, { name: "name" }));
+        t.after(cleanup);
+        assert.equal($('[data-testid="label"]')?.textContent, 'name');
+    });
+    it('converts camelCase to spaced words', (t) => {
+        let { $, cleanup } = render(_jsx(FieldLabel, { name: "firstName" }));
+        t.after(cleanup);
+        assert.equal($('[data-testid="label"]')?.textContent, 'first name');
+    });
+    it('handles multiple humps', (t) => {
+        let { $, cleanup } = render(_jsx(FieldLabel, { name: "dateOfBirth" }));
+        t.after(cleanup);
+        assert.equal($('[data-testid="label"]')?.textContent, 'date of birth');
+    });
+});
+describe('DOM Tests', () => {
+    it('can interact with DOM', async () => {
+        let div = document.createElement('div');
+        div.textContent = 'Hello';
+        assert.equal(div.textContent, 'Hello');
+    });
+    it('can test fetch API', async () => {
+        let response = await fetch('data:text/plain,hello');
+        let text = await response.text();
+        assert.equal(text, 'hello');
+    });
+    it.skip('skip: can skip tests', () => {
+        assert.equal(true, false);
+    });
+    it.todo('todo: can mark tests as todo');
+});
+describe('render/cleanup', () => {
+    it('cleanup removes the container from the DOM', () => {
+        let { container, cleanup } = render(_jsx("div", { "data-testid": "manual", children: "hello" }));
+        assert.equal(document.body.contains(container), true);
+        cleanup();
+        assert.equal(document.body.contains(container), false);
+    });
+});
+describe.skip('skip: Skipped Test Suite', () => {
+    it('would fail', () => {
+        assert.equal(true, false);
+    });
+});
+describe.todo('todo: Test Suite');

package/dist/test/framework.test.e2e.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"framework.test.e2e.d.ts","sourceRoot":"","sources":["../../src/test/framework.test.e2e.tsx"],"names":[],"mappings":""}

package/dist/test/framework.test.e2e.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@remix-run/ui/jsx-runtime";
+import * as assert from 'node:assert/strict';
+import { renderToString } from '@remix-run/ui/server';
+import { createTestServer } from '@remix-run/node-fetch-server/test';
+import { describe, it } from "../lib/framework.js";
+const html = async (n) => new Response(await renderToString(n), {
+    headers: { 'Content-Type': 'text/html' },
+});
+describe('e2e tests', () => {
+    it('runs playwright against a fetch handler', async (t) => {
+        function Doc(handle) {
+            return () => (_jsxs("html", { children: [
+                    _jsx("head", { children: _jsx("title", { children: "Test" }) }), _jsx("body", { children: handle.props.children })
+                ] }));
+        }
+        let handler = (request) => {
+            let url = new URL(request.url);
+            if (url.pathname === '/') {
+                return html(_jsxs(Doc, { children: [
+                        _jsx("h1", { children: "Hello Remix" }), _jsx("a", { href: "/about", children: "About" })
+                    ] }));
+            }
+            if (url.pathname === '/about') {
+                return html(_jsx(Doc, { children: _jsx("h1", { children: "About Remix" }) }));
+            }
+            return new Response('Not found', { status: 404 });
+        };
+        let page = await t.serve(await createTestServer(handler));
+        await page.goto('/');
+        assert.equal(await page.locator('h1').textContent(), 'Hello Remix');
+        await page.click('[href="/about"]');
+        assert.equal(await page.locator('h1').textContent(), 'About Remix');
+    });
+});

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@remix-run/test",
-  "version": "0.1.0",
-  "description": "A browser-based test framework for Remix components",
+  "version": "0.2.0",
+  "description": "A test framework for JavaScript and TypeScript projects",
   "author": "Shopify Inc.",
   "license": "MIT",
   "repository": {
@@ -19,8 +19,11 @@
     "!src/**/*.test.*"
   ],
   "type": "module",
+  "engines": {
+    "node": ">=24.3.0"
+  },
   "bin": {
-    "remix-test": "./dist/cli.js"
+    "remix-test": "./dist/cli-entry.js"
   },
   "exports": {
     ".": {
@@ -28,13 +31,23 @@
       "default": "./dist/index.js"
     },
     "./package.json": "./package.json",
-    "./cli": "./dist/cli.js"
+    "./cli": {
+      "types": "./dist/cli.d.ts",
+      "default": "./dist/cli.js"
+    }
   },
   "dependencies": {
+    "es-module-lexer": "^2.0.0",
+    "esbuild": "^0.27.1",
+    "get-tsconfig": "^4.13.6",
+    "istanbul-lib-coverage": "^3.2.2",
+    "istanbul-lib-report": "^3.0.1",
+    "istanbul-reports": "^3.2.0",
+    "magic-string": "^0.30.21",
+    "source-map-js": "^1.2.1",
     "tsx": "^4.21.0",
-    "@remix-run/component": "0.7.0",
-    "@remix-run/fetch-router": "0.18.1",
-    "@remix-run/node-fetch-server": "0.13.0"
+    "v8-to-istanbul": "^9.3.0",
+    "@remix-run/terminal": "^0.1.0"
   },
   "peerDependencies": {
     "playwright": "^1.59.0"
@@ -45,10 +58,17 @@
     }
   },
   "devDependencies": {
+    "@types/dom-navigation": "1.0.6",
+    "@types/istanbul-lib-coverage": "^2.0.6",
+    "@types/istanbul-lib-report": "^3.0.3",
+    "@types/istanbul-reports": "^3.0.4",
     "@types/node": "^24.6.0",
     "@typescript/native-preview": "7.0.0-dev.20251125.1",
+    "decamelize": "^6.0.1",
     "playwright": "^1.59.0",
-    "@remix-run/assert": "0.1.0"
+    "@remix-run/assert": "^0.1.0",
+    "@remix-run/node-fetch-server": "^0.13.0",
+    "@remix-run/ui": "^0.1.0"
   },
   "keywords": [
     "testing",
@@ -61,7 +81,8 @@
   "scripts": {
     "build": "tsgo -p tsconfig.build.json",
     "clean": "git clean -fdX",
-    "test": "node src/cli.ts",
+    "test": "node src/cli-entry.ts",
+    "test:bun": "bun --bun src/cli-entry.ts --type server",
     "typecheck": "tsgo --noEmit"
   }
 }