Testes

Renderize apps fora da tela, pressione teclas e verifique quadros com @textjs/app/testing.

@textjs/app/testing (ou @textjs/react/testing) renderiza seu app fora da tela, pressiona teclas e retorna o quadro como texto. Os testes rodam sem navegador ou 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");});

Funciona com qualquer executor que aceite testes async, incluindo Bun, Vitest e Jest.

Renderização

MétodoDescrição
render(el, { cols, rows, theme })Montar fora da tela (padrão 80×24)
lastFrame()O quadro como texto puro
lines()O quadro como um array de linhas
framesTodos os quadros distintos até agora
toAnsi()ANSI truecolor, para snapshots
cell(x, y){ char, fg, bg, attrs }
locate(text){ x, y } da primeira correspondência
rerender(el) / unmount()Atualizar ou desmontar

renderToString(el, options) renderiza uma vez e retorna o texto.

Entrada

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);

Cada chamada roda dentro de act() e processa os quadros resultantes, para que a próxima asserção veja a atualização.

Tempo

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 });

Animações, indicadores de carregamento e notificações temporárias usam temporizadores reais, então wait e waitFor são a maneira confiável de observá-los.

Snapshots

expect(app.lastFrame()).toMatchSnapshot();expect(app.toAnsi()).toMatchSnapshot(); // colors too

Os espaços em branco à direita e na parte inferior dos quadros são removidos, para que os snapshots não mudem por causa deles.

Editar esta página no GitHub