Testen
Rendere Apps ohne Anzeige, drücke Tasten und prüfe Frames mit @textjs/app/testing.
@textjs/app/testing (oder @textjs/react/testing) rendert deine App außerhalb des sichtbaren Bereichs, drückt Tasten und gibt den Frame als Text zurück. Tests laufen ohne Browser oder DevTools.
import { afterEach, expect, test } from "bun:test";import { cleanup, render } from "@textjs/app/testing";import { Counter } from "./counter";afterEach(cleanup);test("counts up", async () => { const app = await render(<Counter />, { cols: 40, rows: 6 }); await app.press("up up"); expect(app.lastFrame()).toContain("count = 2");});Es funktioniert mit jedem Test-Runner, der async-Tests unterstützt, darunter Bun, Vitest und Jest.
Rendering
| Methode | Beschreibung |
|---|---|
render(el, { cols, rows, theme }) | Außerhalb des sichtbaren Bereichs einhängen (Standard: 80×24) |
lastFrame() | Der Frame als reiner Text |
lines() | Der Frame als Array von Zeilen |
frames | Alle bisherigen unterschiedlichen Frames |
toAnsi() | Truecolor-ANSI für Snapshots |
cell(x, y) | { char, fg, bg, attrs } |
locate(text) | { x, y } des ersten Treffers |
rerender(el) / unmount() | Aktualisieren oder aushängen |
renderToString(el, options) rendert einmal und gibt den Text zurück.
Eingabe
await app.press("down");await app.press("ctrl+k"); // modifiersawait app.press("g g"); // a sequenceawait app.press("G"); // Shift+Gawait app.type("hello\n"); // one key per character, \n is Enterawait app.paste("multi\nline");await app.wheel(3);await app.resize(120, 36);Jeder Aufruf läuft innerhalb von act() und gibt die entstandenen Frames aus, sodass die nächste Assertion die Aktualisierung sieht.
Zeit
await app.wait(300); // real time passes, then frames flushawait app.waitForText("Deployed"); // poll until the frame contains itawait app.waitFor(() => expect(saved).toBe(true), { timeout: 2000 });Animationen, Spinner und Toasts verwenden echte Timer, daher kannst du sie mit wait und waitFor zuverlässig beobachten.
Snapshots
expect(app.lastFrame()).toMatchSnapshot();expect(app.toAnsi()).toMatchSnapshot(); // colors tooLeerraum am rechten und unteren Rand der Frames wird entfernt, damit Snapshots sich nicht wegen Leerraum ändern.