테스트
화면 밖에서 렌더링하고, 키를 누르고, 프레임을 텍스트로 검증하세요.
이 장의 내용
- 첫 번째 테스트
- 키 입력
- 실행
- 스냅샷
@textjs/app/testing은 화면 밖에서 앱을 렌더링하고, 키를 누르고, 프레임을 일반 텍스트로 반환해요. 테스트는 브라우저나 DevTools 없이 실행돼요.
첫 번째 테스트
추가: 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() 안에서 실행되고 결과 프레임을 모두 반영하므로, 다음 검증에서 업데이트를 확인할 수 있어요.
추가: 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);추가: });테이블은 강조된 행 앞에 ›를 표시하므로, ↓ 테스트는 해당 행을 찾아 커밋을 확인해요. 숫자 키는 열을 기준으로 정렬하며, 4번째 열은 Build예요.
실행
bun testBun, Vitest, Jest 등 async 테스트를 지원하는 모든 러너에서 실행할 수 있어요. 콘솔에서 Enter를 눌러 테스트 모음을 실행하고, f를 눌러 테스트를 실패시켜 실패가 어떻게 표시되는지 확인하세요.
스냅샷
toAnsi()는 프레임을 트루컬러 ANSI로 반환하므로, 색상 회귀도 감지하는 스냅샷을 만들 수 있어요:
expect(app.toAnsi()).toMatchSnapshot();사용해 보기
이 장을 마쳤을 때의 Acme Deploys 앱이 DevTools에서 실행 중이에요. 패드를 클릭한 뒤 아래 키를 사용하세요.
콘솔 열기
앱은 DevTools에서 렌더링돼요.먼저 Safari 설정 → 고급에서 ‘웹 개발자용 기능 보기’를 켜세요. 그다음 여기를 클릭하고 Enter를 누르세요.
데스크톱에서 열기
이 앱은 DevTools 콘솔에서 렌더링되므로 데스크톱 브라우저가 필요해요.
퀴즈
질문 2개장을 완료하려면 모든 문제에 답하세요.