測試
在畫面外渲染、模擬按鍵，並以文字斷言影格。
本章內容
- 第一個測試
- 模擬按鍵
- 執行測試
- 快照
@textjs/app/testing 在畫面外渲染應用程式、模擬按鍵，並以純文字回傳影格。測試執行時不需要瀏覽器或 DevTools。
第一個測試
app/deployments/page.test.tsx+19tsx
新增：import { afterEach, beforeEach, expect, mock, spyOn, test } from "bun:test";新增：import { cleanup, render } from "@textjs/app/testing";新增：import { DEPLOYMENTS } from "../../lib/deployments";新增：import DeploymentsPage from "./page";新增：新增：beforeEach(() => {新增： spyOn(globalThis, "fetch").mockResolvedValue(Response.json(DEPLOYMENTS));新增：});新增：新增：afterEach(() => {新增： mock.restore();新增： return cleanup();新增：});新增：新增：test("lists every deployment", async () => {新增： const app = await render(<DeploymentsPage />, { cols: 80, rows: 12 });新增： await app.waitForText("feat: stream cells downward");新增： expect(app.lines()).toHaveLength(12);新增：});頁面會擷取 /api/deployments，但 bun test 環境中沒有伺服器，因此 beforeEach 用相同的資料替代 fetch。render 預設使用 80×24 的格線。lastFrame() 以文字回傳整個影格，lines() 逐列回傳影格，而 cell(x, y) 則提供單一儲存格的字元與色彩。
模擬按鍵
press 接受的按鍵字串與 useKeymap 相同。每次呼叫都在 act() 內執行，並完成產生的影格更新，讓下一個斷言能讀到更新後的結果。
app/deployments/page.test.tsx+14tsx
新增：test("↓ moves the highlight", async () => {新增： const app = await render(<DeploymentsPage />);新增： await app.waitForText("feat: stream cells downward");新增： await app.press("down");新增： const row = app.lines().find((line) => line.includes("›"));新增： expect(row).toContain("perf: merge spans across rows");新增：});新增：新增：test("4 sorts by build time", async () => {新增： const app = await render(<DeploymentsPage />);新增： await app.waitForText("Build");新增： await app.press("4"); // sort by the 4th column新增： expect(app.locate("12s")?.y).toBeLessThan(app.locate("52s")?.y ?? 0);新增：});表格會在反白列前方繪製 ›，因此 ↓ 測試會找出該列並檢查其提交。數字鍵會依對應欄位排序，而第四欄是建置時間。
執行測試
bun test任何支援 async 測試的執行器都能使用，包括 Bun、Vitest 或 Jest。在主控台中，按 Enter 執行測試套件，按 f 讓測試失敗，查看失敗時的結果。
快照
toAnsi() 以真彩色 ANSI 回傳影格，產生的快照也能偵測色彩的迴歸問題：
expect(app.toAnsi()).toMatchSnapshot();試用
這是本章結束時的 Acme Deploys，正在 DevTools 中執行。點擊操作區，再使用下方按鍵。
▼ 08 · 測試
開啟主控台
⌘⌥J
CtrlShiftJ
⌘⌥K
CtrlShiftK
⌘⌥C
應用程式在 DevTools 中渲染。先在 Safari「設定」→「進階」中開啟「顯示網頁開發者功能」。 接著點擊這裡並按 Enter。
在電腦上開啟
此應用程式在 DevTools 主控台中渲染，需要桌面版瀏覽器。
測驗
2 個問題回答所有問題以完成本章。