vitest >=5.0.0 changed what `toHaveTextContent` does. The browser-mode matcher now validates that the text content is exactly equal to the expected string; toMatchTextContent performs a partial match.
Evidence
const fs = require("fs");
const path = require("path");
const { register } = require("module");
const { pathToFileURL } = require("url");
const dist = "/w/node_modules/@vitest/browser/dist";
const entry = path.join(dist, "expect-element.js");
// Collect the names each file imports from vitest modules, so the stubs export exactly those.
const names = {};
function collect(file) {
const src = fs.readFileSync(file, "utf8");
for (const m of src.matchAll(/import\{([^}]*)\}from"(vitest(?:\/[a-z/]+)?)"/g)) {
names[m[2]] ??= new Set();
for (const part of m[1].split(",")) names[m[2]].add(part.trim().split(/\s+/)[0]);
}
for (const m of src.matchAll(/import"(vitest(?:\/[a-z/]+)?)"/g)) names[m[1]] ??= new Set();
return src;
}
const entrySrc = collect(entry);
for (const m of entrySrc.matchAll(/from"\.\/([^"]+)"/g)) collect(path.join(dist, m[1]));
// A stand-in that accepts any property access, call, or construction.
function absorb() {
const cache = new Map();
const p = new Proxy(function () {}, {
get(t, k) {
if (k === "then") return undefined;
if (k === Symbol.toPrimitive) return () => "";
if (k === Symbol.iterator) return function* () {};
if (typeof k === "symbol") return t[k];
if (!cache.has(k)) cache.set(k, absorb());
return cache.get(k);
},
apply: () => absorb(),
construct: () => absorb(),
set: () => true,
});
return p;
}
globalThis.__ludionMatchers = {};
globalThis.__ludionStub = (mod, name) => {
if (mod === "vitest" && name === "expect") {
return { extend(m) { Object.assign(globalThis.__ludionMatchers, m); } };
}
if (mod === "vitest/browser" && name === "server") {
return { config: { browser: { name: "chromium", locators: { exact: false, testIdAttribute: "data-testid" }, providerOptions: {} } } };
}
return absorb();
};
globalThis.window = globalThis;
globalThis.__vitest_browser_runner__ = absorb();
const stubs = {};
for (const [mod, set] of Object.entries(names)) {
const body = [...set].map((n) => "export const " + n + " = globalThis.__ludionStub(" + JSON.stringify(mod) + ", " + JSON.stringify(n) + ");").join("\n");
stubs[mod] = "data:text/javascript," + encodeURIComponent(body + "\nexport {};");
}
const hooks = "const STUBS = " + JSON.stringify(stubs) + ";\n" +
"export async function resolve(specifier, context, next) {\n" +
" if (Object.hasOwn(STUBS, specifier)) return { url: STUBS[specifier], shortCircuit: true };\n" +
" return next(specifier, context);\n" +
"}\n";
register("data:text/javascript," + encodeURIComponent(hooks));
class FakeNode {}
const view = { Node: FakeNode, HTMLElement: FakeNode, SVGElement: FakeNode };
function element(text) {
const e = Object.create(FakeNode.prototype);
e.textContent = text;
e.ownerDocument = { defaultView: view };
return e;
}
(async () => {
await import(pathToFileURL(entry).href);
const m = globalThis.__ludionMatchers;
if (typeof m.toHaveTextContent !== "function") {
console.error("ERROR: expect-element.js did not register toHaveTextContent");
process.exit(2);
}
const ctx = { isNot: false, utils: absorb(), equals: () => false, customTesters: [] };
const exact = m.toHaveTextContent.call(ctx, element("Error!"), "Error!");
const partial = m.toHaveTextContent.call(ctx, element("Error!"), "Error");
console.log("toHaveTextContent('Error!') on 'Error!': pass=" + exact.pass);
console.log("toHaveTextContent('Error') on 'Error!': pass=" + partial.pass);
if (exact.pass !== true) {
console.error("ERROR: an exact text did not match");
process.exit(2);
}
if (partial.pass !== false) {
console.error("FAIL: toHaveTextContent('Error') passed on the text 'Error!' (partial match)");
process.exit(1);
}
if (typeof m.toMatchTextContent !== "function") {
console.error("ERROR: toMatchTextContent is not registered");
process.exit(2);
}
const match = m.toMatchTextContent.call(ctx, element("Error!"), "Error");
console.log("toMatchTextContent('Error') on 'Error!': pass=" + match.pass);
if (match.pass !== true) {
console.error("ERROR: toMatchTextContent did not match part of the text");
process.exit(2);
}
console.log("PASS: toHaveTextContent matches the exact text; toMatchTextContent matches part of it");
})().catch((e) => {
console.error("ERROR: " + (e && e.stack || e));
process.exit(2);
});
const fs = require("fs");
const path = require("path");
const { register } = require("module");
const { pathToFileURL } = require("url");
const dist = "/w/node_modules/@vitest/browser/dist";
const entry = path.join(dist, "expect-element.js");
// Collect the names each file imports from vitest modules, so the stubs export exactly those.
const names = {};
function collect(file) {
const src = fs.readFileSync(file, "utf8");
for (const m of src.matchAll(/import\{([^}]*)\}from"(vitest(?:\/[a-z/]+)?)"/g)) {
names[m[2]] ??= new Set();
for (const part of m[1].split(",")) names[m[2]].add(part.trim().split(/\s+/)[0]);
}
for (const m of src.matchAll(/import"(vitest(?:\/[a-z/]+)?)"/g)) names[m[1]] ??= new Set();
return src;
}
const entrySrc = collect(entry);
for (const m of entrySrc.matchAll(/from"\.\/([^"]+)"/g)) collect(path.join(dist, m[1]));
// A stand-in that accepts any property access, call, or construction.
function absorb() {
const cache = new Map();
const p = new Proxy(function () {}, {
get(t, k) {
if (k === "then") return undefined;
if (k === Symbol.toPrimitive) return () => "";
if (k === Symbol.iterator) return function* () {};
if (typeof k === "symbol") return t[k];
if (!cache.has(k)) cache.set(k, absorb());
return cache.get(k);
},
apply: () => absorb(),
construct: () => absorb(),
set: () => true,
});
return p;
}
globalThis.__ludionMatchers = {};
globalThis.__ludionStub = (mod, name) => {
if (mod === "vitest" && name === "expect") {
return { extend(m) { Object.assign(globalThis.__ludionMatchers, m); } };
}
if (mod === "vitest/browser" && name === "server") {
return { config: { browser: { name: "chromium", locators: { exact: false, testIdAttribute: "data-testid" }, providerOptions: {} } } };
}
return absorb();
};
globalThis.window = globalThis;
globalThis.__vitest_browser_runner__ = absorb();
const stubs = {};
for (const [mod, set] of Object.entries(names)) {
const body = [...set].map((n) => "export const " + n + " = globalThis.__ludionStub(" + JSON.stringify(mod) + ", " + JSON.stringify(n) + ");").join("\n");
stubs[mod] = "data:text/javascript," + encodeURIComponent(body + "\nexport {};");
}
const hooks = "const STUBS = " + JSON.stringify(stubs) + ";\n" +
"export async function resolve(specifier, context, next) {\n" +
" if (Object.hasOwn(STUBS, specifier)) return { url: STUBS[specifier], shortCircuit: true };\n" +
" return next(specifier, context);\n" +
"}\n";
register("data:text/javascript," + encodeURIComponent(hooks));
class FakeNode {}
const view = { Node: FakeNode, HTMLElement: FakeNode, SVGElement: FakeNode };
function element(text) {
const e = Object.create(FakeNode.prototype);
e.textContent = text;
e.ownerDocument = { defaultView: view };
return e;
}
(async () => {
await import(pathToFileURL(entry).href);
const m = globalThis.__ludionMatchers;
if (typeof m.toHaveTextContent !== "function") {
console.error("ERROR: expect-element.js did not register toHaveTextContent");
process.exit(2);
}
const ctx = { isNot: false, utils: absorb(), equals: () => false, customTesters: [] };
const exact = m.toHaveTextContent.call(ctx, element("Error!"), "Error!");
const partial = m.toHaveTextContent.call(ctx, element("Error!"), "Error");
console.log("toHaveTextContent('Error!') on 'Error!': pass=" + exact.pass);
console.log("toHaveTextContent('Error') on 'Error!': pass=" + partial.pass);
if (exact.pass !== true) {
console.error("ERROR: an exact text did not match");
process.exit(2);
}
if (partial.pass !== false) {
console.error("FAIL: toHaveTextContent('Error') passed on the text 'Error!' (partial match)");
process.exit(1);
}
if (typeof m.toMatchTextContent !== "function") {
console.error("ERROR: toMatchTextContent is not registered");
process.exit(2);
}
const match = m.toMatchTextContent.call(ctx, element("Error!"), "Error");
console.log("toMatchTextContent('Error') on 'Error!': pass=" + match.pass);
if (match.pass !== true) {
console.error("ERROR: toMatchTextContent did not match part of the text");
process.exit(2);
}
console.log("PASS: toHaveTextContent matches the exact text; toMatchTextContent matches part of it");
})().catch((e) => {
console.error("ERROR: " + (e && e.stack || e));
process.exit(2);
});
The browser-mode toHaveTextContent matcher now validates that an element's text content is exactly equal to the expected string instead of performing a partial, case-sensitive match.