@specific.dev/spectest 0.66.0 → 0.67.0

package/src/daemon.ts

@@ -100,6 +100,7 @@ import {
 import { encodeRegistry } from "./harness/names-registry.js";
 import {
   InterceptRegistry,
+  parseTarget,
   runChain,
   type Interceptor,
 } from "./harness/intercept.js";
@@ -174,6 +175,7 @@ import {
   startRecording,
   stopRecording,
   truncateUtf8,
+  type StepBlock,
   type TestEvent,
   type OmittedBody,
 } from "./recorder.js";
@@ -2796,16 +2798,22 @@ function ingressClaimsHostname(hostname: string): boolean {
   return false;
 }
 
-/** Record one request an interceptor saw, nested under its `intercept` step. */
+/** Record one request an interceptor saw, nested under its `intercept` step.
+ *
+ * A forced 503 is the step doing exactly what its description says, so it is
+ * **not** marked failed — reddening the outcome the test asked for trains the
+ * reader to ignore the colour. Only a handler that threw is marked, because
+ * that 500 is a bug in the middleware rather than the outage it stands for. */
 function recordInterceptedRequest(
   it: Interceptor,
-  rec: { method: string; path: string; status: number; answeredBy: string },
+  rec: { method: string; path: string; status: number; answeredBy: string; threw?: boolean },
   durationMs: number,
 ): void {
   const parentSeq = INTERCEPT_STEP_SEQ.get(it.id);
   if (parentSeq === undefined || !isRecording()) return;
-  const by =
-    rec.answeredBy === "handler"
+  const by = rec.threw
+    ? "the interceptor threw — 500 from spectest, not from your handler"
+    : rec.answeredBy === "handler"
       ? "answered by the interceptor"
       : rec.answeredBy === "modified"
         ? "upstream answer replaced by the interceptor"
@@ -2814,22 +2822,42 @@ function recordInterceptedRequest(
     kind: "intercept-request",
     parentSeq,
     title: `${rec.method} ${rec.path} → ${rec.status}`,
-    status: rec.status >= 500 && rec.answeredBy !== "upstream" ? "failed" : "passed",
+    status: rec.threw ? "failed" : "passed",
+    // Method, path and status are already the title; the one thing the row
+    // cannot say for itself is who produced that status.
     blocks: [
-      {
-        type: "kv",
-        rows: [
-          { label: "Host", value: it.hostname },
-          { label: "Request", value: `${rec.method} ${rec.path}` },
-          { label: "Status", value: String(rec.status) },
-          { label: "Answered", value: by },
-        ],
-      },
+      { type: "kv", rows: [{ label: "Answered", value: by, error: rec.threw === true }] },
     ],
     durationMs,
   });
 }
 
+/** The handler's own source, which is what the interceptor actually does.
+ *
+ * Free and impossible to let rot: Bun runs the project's TypeScript
+ * directly, so `toString()` is the text the author wrote. It is the step's
+ * body, under the description — a mechanism the reader can check against
+ * the intent the description claims. A handler long enough to be a wall of
+ * code folds into a disclosure instead of pushing the requests off screen.
+ */
+function handlerBlocks(handler: InterceptHandler): StepBlock[] {
+  let src: string;
+  try {
+    src = String(handler);
+  } catch {
+    return [];
+  }
+  const code: StepBlock = { type: "code", lang: "ts", label: "Handler", code: src };
+  return src.split("\n").length > HANDLER_FOLD_LINES
+    ? [{ type: "details", summary: "Handler", blocks: [code] }]
+    : [code];
+}
+
+/** Past this many lines the handler source is folded away. Chosen so the
+ *  shapes this feature is for — a one-line forced status, a short
+ *  fail-twice-then-pass — always show, and only a real program hides. */
+const HANDLER_FOLD_LINES = 15;
+
 /**
  * Put middleware in front of a hostname the ingress serves — the
  * implementation behind `ctx.intercept`.
@@ -2838,19 +2866,25 @@ function recordInterceptedRequest(
  * the daemon (DNS does not point here), so the interceptor could only be
  * silent — and silence is the failure mode this whole layer is designed
  * against. The message names the two ways to get a route.
+ *
+ * The `description` is required because it is the step's whole title in the
+ * timeline and in the CLI's failure detail: it is what tells a reader why
+ * the UI under test went to its error state. The handler source says how;
+ * only the author can say what it means.
  */
 function registerInterceptor(
-  hostname: string,
-  pathOrHandler: string | InterceptHandler,
-  maybeHandler?: InterceptHandler,
+  target: string,
+  description: string,
+  handler: InterceptHandler,
 ): Interception {
-  const path = typeof pathOrHandler === "string" ? pathOrHandler : undefined;
-  const handler = typeof pathOrHandler === "function" ? pathOrHandler : maybeHandler;
-  if (typeof hostname !== "string" || hostname.length === 0) {
-    throw new Error("ctx.intercept: a hostname is required");
+  const { hostname: host, path } = parseTarget(target);
+  if (typeof description !== "string" || description.trim() === "") {
+    throw new Error(
+      `ctx.intercept(${JSON.stringify(target)}): a description is required — what the ` +
+        `environment now does, as the timeline reads it, e.g. "the sync endpoint returns 503".`,
+    );
   }
-  const host = hostname.toLowerCase().replace(/^https?:\/\//, "").replace(/\/.*$/, "");
-  if (!handler) {
+  if (typeof handler !== "function") {
     throw new Error("ctx.intercept: a handler (req, next) => Response is required");
   }
   if (!ingressClaimsHostname(host)) {
@@ -2863,20 +2897,42 @@ function registerInterceptor(
   }
   const resv = reserveEvent();
   const it = INTERCEPTORS.register(host, path, handler);
+  const where = `${host}${it.path === "/" ? "" : it.path}`;
   const seq = recordStep(
     {
       kind: "intercept",
-      title: `intercept ${host}${it.path === "/" ? "" : it.path}`,
+      // The description alone. The pill already says INTERCEPT, and the
+      // target is in the panel — a row that repeats both spends its width
+      // on what the reader can already see and none of it on the one thing
+      // only the author knows.
+      title: description.trim(),
       blocks: [
+        ...handlerBlocks(handler),
         {
-          type: "kv",
-          rows: [
-            { label: "Host", value: host },
-            { label: "Path", value: it.path === "/" ? "/ (every path)" : `${it.path} and below` },
+          // The target IS the summary line, so the closed disclosure still
+          // says where the interceptor sits — a generic "Target" label
+          // would spend the one visible line saying nothing.
+          type: "details",
+          summary: where,
+          blocks: [
+            {
+              type: "kv",
+              rows: [
+                {
+                  label: "Matches",
+                  value: it.path === "/" ? "every path on this host" : `${it.path} and below`,
+                },
+                {
+                  label: "Until",
+                  value: it.scope === undefined ? "remove()" : "the end of this test",
+                },
+              ],
+            },
           ],
         },
       ],
-      durationMs: 0,
+      // No duration: this is a marker for the moment the interceptor went
+      // up, and "(0 ms)" reads as a step that did nothing.
     },
     resv,
   );

package/src/harness/intercept.test.ts

@@ -3,6 +3,7 @@ import {
   InterceptRegistry,
   hostnameMatches,
   normalizeMount,
+  parseTarget,
   pathMounts,
   runChain,
   type Interceptor,
@@ -39,6 +40,41 @@ describe("normalizeMount", () => {
   });
 });
 
+describe("parseTarget", () => {
+  test("a bare hostname mounts at the root", () => {
+    expect(parseTarget("app.test")).toEqual({ hostname: "app.test", path: "/" });
+  });
+  test("a path rides the target", () => {
+    expect(parseTarget("app.test/api/sync")).toEqual({
+      hostname: "app.test",
+      path: "/api/sync",
+    });
+    expect(parseTarget("app.test/api/")).toEqual({ hostname: "app.test", path: "/api" });
+    expect(parseTarget("app.test/")).toEqual({ hostname: "app.test", path: "/" });
+  });
+  test("a scheme and case are tolerated", () => {
+    expect(parseTarget("https://App.Test/API")).toEqual({
+      hostname: "app.test",
+      path: "/api",
+    });
+  });
+  test("a wildcard host keeps its pattern", () => {
+    expect(parseTarget("*.example.com/v1")).toEqual({
+      hostname: "*.example.com",
+      path: "/v1",
+    });
+  });
+  test("rejects a target that is only a path, or none at all", () => {
+    expect(() => parseTarget("/api")).toThrow(/names no hostname/);
+    expect(() => parseTarget("")).toThrow(/target hostname is required/);
+    expect(() => parseTarget("   ")).toThrow(/target hostname is required/);
+  });
+  test("rejects a query or fragment", () => {
+    expect(() => parseTarget("app.test/api?x=1")).toThrow(/mount prefix/);
+    expect(() => parseTarget("app.test?x=1")).toThrow(/query or fragment/);
+  });
+});
+
 describe("hostnameMatches", () => {
   test("exact and wildcard", () => {
     expect(hostnameMatches("api.test", "api.test")).toBe(true);

package/src/harness/intercept.ts

@@ -56,6 +56,12 @@ export interface InterceptedRequest {
    *  upstream via `next()` untouched (`upstream`), or the upstream's answer
    *  replaced by the interceptor after `next()` (`modified`). */
   answeredBy: "handler" | "upstream" | "modified";
+  /** The handler threw (or returned something that is not a `Response`), so
+   *  the 500 below is a bug in the test's own middleware rather than the
+   *  outage it was asked to produce. The distinction cannot be recovered
+   *  from the status: a deliberate 500 and a crashed handler are the same
+   *  number, and only this tells the timeline which one to mark as wrong. */
+  threw?: boolean;
 }
 
 export interface Interceptor {
@@ -71,6 +77,39 @@ export interface Interceptor {
   requests: InterceptedRequest[];
 }
 
+/**
+ * Split an intercept target — `app.test`, `app.test/api/sync`,
+ * `*.example.com/v1` — into the hostname and the mount path.
+ *
+ * The path rides the target rather than a second argument because that is
+ * what it is: part of what the interceptor claims, not a separate knob. It
+ * also keeps the signature down to one string, so the description that
+ * follows can never be mistaken for a path.
+ *
+ * A scheme is tolerated (`https://app.test/api`) since that is how the same
+ * address is written everywhere else.
+ */
+export function parseTarget(target: string): { hostname: string; path: string } {
+  if (typeof target !== "string" || target.trim() === "") {
+    throw new Error("intercept: a target hostname is required, e.g. \"app.test\" or \"app.test/api\"");
+  }
+  const bare = target.trim().toLowerCase().replace(/^[a-z][a-z0-9+.-]*:\/\//, "");
+  const slash = bare.indexOf("/");
+  const hostname = slash === -1 ? bare : bare.slice(0, slash);
+  const rest = slash === -1 ? undefined : bare.slice(slash);
+  if (hostname === "") {
+    throw new Error(
+      `intercept: target ${JSON.stringify(target)} names no hostname — write it as "app.test/api", not "/api"`,
+    );
+  }
+  if (hostname.includes("?") || hostname.includes("#")) {
+    throw new Error(
+      `intercept: target ${JSON.stringify(target)} cannot carry a query or fragment`,
+    );
+  }
+  return { hostname, path: normalizeMount(rest) };
+}
+
 /** Mount semantics (`app.use(path, fn)`): `/api` matches `/api`, `/api/`, `/api/x`, and
  *  never `/apix`. `/` matches everything. Query strings do not take part. */
 export function pathMounts(mount: string, pathname: string): boolean {
@@ -222,6 +261,7 @@ export async function runChain(
       );
       record.answeredBy = "handler";
       record.status = 500;
+      record.threw = true;
       it.calls++;
       it.requests.push(record);
       observe?.(it, record, Date.now() - started);

package/src/index.ts

@@ -116,7 +116,20 @@ import {
   getBrowserProbe,
   DEFAULT_ACTION_TIMEOUT_MS,
 } from "./locator.js";
-import { formatWaited, locatorFailureMessage } from "./locator-errors.js";
+import {
+  classifyLocatorFailure,
+  formatWaited,
+  locatorFailureMessage,
+} from "./locator-errors.js";
+import {
+  containsText,
+  containsTextArray,
+  escapeInvisible,
+  matchesText,
+  matchesTextArray,
+  textDifferenceNote,
+  type TextMatchOptions,
+} from "./text-match.js";
 
 export type { UrlPattern } from "./url-match.js";
 import type { UrlPattern } from "./url-match.js";
@@ -182,7 +195,8 @@ export type { InterceptHandler, InterceptNext, InterceptedRequest };
  */
 export interface Interception {
   hostname: string;
-  /** The normalised mount path (`"/"` when none was given). */
+  /** The normalised mount path parsed off the target (`"/"` when the
+   *  target was a bare hostname). */
   path: string;
   /** How many requests the interceptor has seen. Provenance-wrapped, so an
    *  `expect(outage.calls)` nests under the intercept step; `.unwrap()` for
@@ -545,12 +559,23 @@ export interface SpectestContext<
    * make your **own** backend misbehave for one test: force a 500 from an
    * API route, add latency, fail twice then pass, or just count calls.
    *
+   * `target` is the hostname, optionally with a mount path:
+   * `"app.test"` claims every request to that host, `"app.test/api/sync"`
+   * claims that path and everything below it (like `app.use(path, fn)`).
+   *
+   * `description` is what the environment now **does**, in the present
+   * tense — it is the step's whole title in the timeline and in the CLI's
+   * failure detail, so it is what tells a reader why the page under test
+   * went to its error state. Write the effect, not the act of intercepting
+   * (the step is already labelled INTERCEPT) and not the test's goal:
+   * `"the sync endpoint returns 503"`, not `"intercept sync"`, `"mock the
+   * API"` or `"test error handling"`. The handler's own source is shown
+   * under it, so the description carries the intent, never the mechanism.
+   *
    * Hono/Koa-style middleware: `(req, next)` where `next()` returns the real upstream's
    * response (a proxied service, or a fake). Return a `Response` to answer
    * yourself, `next()` to pass through, or change what `next()` returned.
-   * An optional mount `path` limits it to that path and everything below
-   * (`"/functions/v1/sync"`), like `app.use(path, fn)`. Interceptors run in
-   * registration order.
+   * Interceptors run in registration order.
    *
    * Only traffic that reaches the daemon can be intercepted: the browser,
    * `ctx.fetch`, and any container that calls the hostname — so the service
@@ -564,16 +589,18 @@ export interface SpectestContext<
    * `remove()`. Every request it sees is recorded under the intercept step.
    *
    * ```ts
-   * const outage = ctx.intercept("api.test", "/functions/v1/sync", () =>
-   *   new Response("boom", { status: 500 }));
+   * const outage = ctx.intercept(
+   *   "api.test/functions/v1/sync",
+   *   "the sync function returns 500",
+   *   () => new Response("boom", { status: 500 }),
+   * );
    * await page.getByRole("button", { name: "Sync" }).click();
    * await expect(page.getByText("Retry")).toBeVisible();
    * expect(outage.calls).toBe(1);
    * outage.remove();                           // the retry now reaches the real function
    * ```
    */
-  intercept(hostname: string, handler: InterceptHandler): Interception;
-  intercept(hostname: string, path: string, handler: InterceptHandler): Interception;
+  intercept(target: string, description: string, handler: InterceptHandler): Interception;
   /**
    * Mint a leaf certificate from the in-VM root CA and return the PEMs.
    *
@@ -2657,6 +2684,15 @@ export interface Expectation extends Matchers {
   not: Matchers;
 }
 
+/** Options for the text matchers — playwright's set, same names, same
+ *  meanings. */
+export interface TextMatcherOptions extends TextMatchOptions {
+  timeout?: number;
+  /** Read `innerText` (what the page renders — hidden elements dropped,
+   *  `text-transform` applied) instead of `textContent`. */
+  useInnerText?: boolean;
+}
+
 /**
  * Auto-retrying web-first assertions for a {@link Locator} — Playwright's
  * `expect(locator)` matchers. Each polls the element until it passes or a
@@ -2668,10 +2704,33 @@ export interface LocatorMatchers {
   toBeVisible(opts?: { timeout?: number }): Promise<void>;
   /** The element is absent or hidden. */
   toBeHidden(opts?: { timeout?: number }): Promise<void>;
-  /** The element's (trimmed) text equals `expected` (or matches a RegExp). */
-  toHaveText(expected: string | RegExp, opts?: { timeout?: number }): Promise<void>;
-  /** The element's text contains `expected`. */
-  toContainText(expected: string, opts?: { timeout?: number }): Promise<void>;
+  /**
+   * The element's text equals `expected`, or matches it when it is a RegExp.
+   *
+   * **Whitespace is normalized on both sides**, exactly as playwright does
+   * it: the text is trimmed and every run of whitespace becomes one space.
+   * So a typed space matches the no-break space (U+00A0) that
+   * `Intl.NumberFormat` puts between thousands, and a value wrapped across
+   * two lines in the markup matches the one-line string you wrote.
+   *
+   * Pass an **array** to assert over every element the locator matches, in
+   * order; the counts must then agree.
+   */
+  toHaveText(
+    expected: string | RegExp | Array<string | RegExp>,
+    opts?: TextMatcherOptions,
+  ): Promise<void>;
+  /**
+   * The element's text contains `expected` — a substring, or a RegExp tested
+   * against the text. Whitespace is normalized as in {@link toHaveText}.
+   *
+   * An **array** asserts that the matched elements contain these texts in
+   * order; unlike `toHaveText` extra elements between them are allowed.
+   */
+  toContainText(
+    expected: string | RegExp | Array<string | RegExp>,
+    opts?: TextMatcherOptions,
+  ): Promise<void>;
   /** The input's value equals `expected` (or matches a RegExp). */
   toHaveValue(expected: string | RegExp, opts?: { timeout?: number }): Promise<void>;
   /** The locator resolves to exactly `expected` elements. */
@@ -2805,12 +2864,32 @@ function buildLocatorMatchers(
     // matches a hidden element fail identically — so the count is read once,
     // at failure time only. `toHaveCount` is left alone: "expected count 2,
     // got 0" already says it, and better.
+    //
+    // Either way the message ends with the near-miss block — what the page
+    // holds that is close to what was asked for (see locator-hints.ts) — so
+    // the author does not have to run again to find out.
+    const nearMiss = async (): Promise<string> => {
+      try {
+        return await probe.nearMiss();
+      } catch {
+        return "";
+      }
+    };
     const elementFailure = async (err: unknown): Promise<string | undefined> => {
-      if (err !== undefined) return locatorFailureMessage(probe.label, err);
+      if (err !== undefined) {
+        const failure = classifyLocatorFailure(probe.label, err);
+        if (!failure) return undefined;
+        return failure.kind === "no-match"
+          ? failure.message + (await nearMiss())
+          : failure.message;
+      }
       if (expectsGone || matcher === "toHaveCount") return undefined;
       try {
         if ((await probe.count()) === 0) {
-          return `No element matches ${probe.label} (waited ${formatWaited(budget)})`;
+          return (
+            `No element matches ${probe.label} (waited ${formatWaited(budget)})` +
+            (await nearMiss())
+          );
         }
       } catch {
         /* The page is gone or the chain is invalid — the matcher's own
@@ -2882,8 +2961,29 @@ function buildLocatorMatchers(
   };
 
   const not = negated ? " not" : "";
-  const matchesText = (v: string, expected: string | RegExp): boolean =>
-    expected instanceof RegExp ? expected.test(v) : v === expected;
+  // The element's text, read the way the caller asked for it. `useInnerText`
+  // is playwright's option and means the same here: what the page renders,
+  // rather than every character in the subtree.
+  const readText = async (opts?: TextMatcherOptions): Promise<string> =>
+    opts?.useInnerText
+      ? await probe.innerText(opts.timeout)
+      : ((await probe.textContent(opts?.timeout)) ?? "");
+  const readTexts = async (opts?: TextMatcherOptions): Promise<string[]> =>
+    opts?.useInnerText ? await probe.allInnerTexts() : await probe.allTextContents();
+  const isArrayExpectation = (
+    v: string | RegExp | Array<string | RegExp>,
+  ): v is Array<string | RegExp> => Array.isArray(v);
+  /** Expected values render as themselves; a RegExp renders as its source. */
+  const fmtExpected = (v: string | RegExp | Array<string | RegExp>): string =>
+    v instanceof RegExp
+      ? String(v)
+      : Array.isArray(v)
+        ? `[${v.map(fmtExpected).join(", ")}]`
+        : fmt(v);
+  /** What goes on the assertion event: a RegExp cannot be serialized. */
+  const expectedValue = (
+    v: string | RegExp | Array<string | RegExp>,
+  ): unknown => (v instanceof RegExp ? String(v) : Array.isArray(v) ? v.map(expectedValue) : v);
 
   return {
     toBeVisible: (opts) =>
@@ -2911,33 +3011,53 @@ function buildLocatorMatchers(
         "toHaveText",
         opts?.timeout,
         async () => {
-          const t = (await probe.textContent(opts?.timeout)) ?? "";
-          return { satisfied: matchesText(t.trim(), expected), actual: t };
+          if (isArrayExpectation(expected)) {
+            const texts = await readTexts(opts);
+            return { satisfied: matchesTextArray(texts, expected, opts), actual: texts };
+          }
+          const t = await readText(opts);
+          return { satisfied: matchesText(t, expected, opts), actual: t };
         },
-        (a) => `expected ${probe.label}${not} to have text ${fmt(expected)}, got ${fmt(a)}`,
-        expected instanceof RegExp ? String(expected) : expected,
+        (a) =>
+          `expected ${probe.label}${not} to have text ${fmtExpected(expected)}, got ${fmt(a)}` +
+          textDifferenceNote(a, expected, "equal"),
+        expectedValue(expected),
       ),
     toContainText: (expected, opts) =>
       run(
         "toContainText",
         opts?.timeout,
         async () => {
-          const t = (await probe.textContent(opts?.timeout)) ?? "";
-          return { satisfied: t.includes(expected), actual: t };
+          if (isArrayExpectation(expected)) {
+            const texts = await readTexts(opts);
+            return { satisfied: containsTextArray(texts, expected, opts), actual: texts };
+          }
+          const t = await readText(opts);
+          return { satisfied: containsText(t, expected, opts), actual: t };
         },
-        (a) => `expected ${probe.label}${not} to contain text ${fmt(expected)}, got ${fmt(a)}`,
-        expected,
+        (a) =>
+          `expected ${probe.label}${not} to contain text ${fmtExpected(expected)}, got ${fmt(a)}` +
+          textDifferenceNote(a, expected, "contains"),
+        expectedValue(expected),
       ),
+    // Deliberately NOT whitespace-normalized: an input's value is data the
+    // user typed or the app set, not rendered text, and playwright compares
+    // it exactly for the same reason. When that exactness is what failed,
+    // `textDifferenceNote` says so instead of leaving two identical-looking
+    // strings on screen.
     toHaveValue: (expected, opts) =>
       run(
         "toHaveValue",
         opts?.timeout,
         async () => {
           const v = await probe.inputValue(opts?.timeout);
-          return { satisfied: matchesText(v, expected), actual: v };
+          const satisfied = expected instanceof RegExp ? expected.test(v) : v === expected;
+          return { satisfied, actual: v };
         },
-        (a) => `expected ${probe.label}${not} to have value ${fmt(expected)}, got ${fmt(a)}`,
-        expected instanceof RegExp ? String(expected) : expected,
+        (a) =>
+          `expected ${probe.label}${not} to have value ${fmtExpected(expected)}, got ${fmt(a)}` +
+          textDifferenceNote(a, expected, "equal"),
+        expectedValue(expected),
       ),
     toHaveCount: (expected, opts) =>
       run(
@@ -3162,7 +3282,8 @@ function buildCore(
       run(
         "toBe",
         Object.is(actual, exp),
-        `expected ${fmt(actual)}${negated ? " not" : ""} to be ${fmt(exp)}`,
+        `expected ${fmt(actual)}${negated ? " not" : ""} to be ${fmt(exp)}` +
+          textDifferenceNote(actual, exp, "equal"),
         exp,
       );
     },
@@ -3177,7 +3298,8 @@ function buildCore(
       run(
         "toEqual",
         equal,
-        `expected ${fmt(actual)}${negated ? " not" : ""} to deep-equal ${fmt(exp)}`,
+        `expected ${fmt(actual)}${negated ? " not" : ""} to deep-equal ${fmt(exp)}` +
+          textDifferenceNote(actual, exp, "equal"),
         exp,
       );
     },
@@ -3245,7 +3367,8 @@ function buildCore(
       run(
         "toContain",
         contained,
-        `expected ${fmt(actual)}${negated ? " not" : ""} to contain ${fmt(exp)}`,
+        `expected ${fmt(actual)}${negated ? " not" : ""} to contain ${fmt(exp)}` +
+          textDifferenceNote(actual, exp, "contains"),
         exp,
       );
     },
@@ -3295,7 +3418,11 @@ function buildCore(
 }
 
 function fmt(v: unknown): string {
-  if (typeof v === "string") return JSON.stringify(v);
+  // A string is escaped down to its invisible characters, so two values that
+  // print the same on screen do not print the same in a failure. Without it a
+  // no-break space and a space are the same three characters wide, and the
+  // message reads "expected "15 000 kr", got "15 000 kr"".
+  if (typeof v === "string") return escapeInvisible(JSON.stringify(v));
   if (typeof v === "bigint") return `${v}n`;
   if (v === undefined) return "undefined";
   try {