テスト
@textjs/app/testingでアプリを画面外に描画し、キーを押してフレームを検証します。
@textjs/app/testing（または @textjs/react/testing）は、アプリを画面外にレンダリングし、キーを押してフレームをテキストとして返します。テストはブラウザーやDevToolsなしで実行できます。
counter.test.tsxtsx
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");});Bun、Vitest、Jestなど、async テストに対応する任意のランナーで動作します。
レンダリング
| メソッド | 説明 |
|---|---|
render(el, { cols, rows, theme }) | 画面外へのマウント（デフォルト80×24） |
lastFrame() | プレーンテキストのフレーム |
lines() | 行の配列としてのフレーム |
frames | これまでの重複のない全フレーム |
toAnsi() | スナップショット用のTruecolor ANSI |
cell(x, y) | { char, fg, bg, attrs } |
locate(text) | 最初の一致の { x, y } |
rerender(el) / unmount() | 更新または破棄 |
renderToString(el, options) は1回レンダリングしてテキストを返します。
入力
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);すべての呼び出しは act() 内で実行され、生成されたフレームをフラッシュするため、次のアサーションで更新を確認できます。
時間
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 });アニメーション、スピナー、トーストは実際のタイマーを使うため、これらを確実に確認するには wait と waitFor を使います。
スナップショット
expect(app.lastFrame()).toMatchSnapshot();expect(app.toAnsi()).toMatchSnapshot(); // colors tooフレームの右端と下端の空白は取り除かれるため、空白によってスナップショットに差分が生じることはありません。