Yunfei He
71e7d7e2f0
render() never set `interactive`, so the runtime derived it as `!isInCi && Boolean(stdout.isTTY)`. `is-in-ci` is evaluated once at module import, so consumers running @vue-tui/testing in CI silently got a non-interactive app: `terminal.resize()` emitted but never re-laid-out (the resize handler is registered only when interactive), and the lifetime raw-mode hold never engaged (`terminal.rawMode.current` stayed false) — breaking both APIs the README advertises. Pin `interactive: options.interactive ?? true` in the mount options so the harness is deterministic and independent of ambient CI/TTY detection, and expose `interactive?: boolean` on RenderOptions so non-interactive behavior stays testable. Runtime behavior is unchanged. Add a subprocess test (runtime-tests, sequential — depends on the process-global CI env baked into the child at import time) that spawns the BUILT dist with CI=true vs CI=false, renders a bordered Box that fills the columns, resizes 40→12, and asserts the re-layout happened and raw mode is held. It fails on origin/main (resize ignored under CI=true) and passes with the fix. Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@vue-tui/testing
Early stage — under active development. Bug reports welcome, but not recommended for production use yet.
Test harness for vue-tui — render Vue 3 terminal components, simulate input, assert frames. Like @testing-library, but for the terminal.
Why
- Isolated terminal — renders into a fake TTY, no real terminal needed
- Input simulation — inject keystrokes that reach
useInputhandlers - Frame snapshots — assert exact visual output with
lastFrame()andframes[] - Auto-cleanup — unmounts all rendered apps after each test (requires Vitest
globals: true)
Install
Assumes @vue-tui/runtime and vue are already installed in your project.
npm install -D @vue-tui/testing
Quick Start
import { defineComponent, shallowRef } from "vue";
import { expect, test } from "vitest";
import { render } from "@vue-tui/testing";
import { Box, Text, useInput } from "@vue-tui/runtime";
test("counter responds to + and - keys", async () => {
const Counter = defineComponent(() => {
const count = shallowRef(0);
useInput((input) => {
if (input === "+") count.value++;
if (input === "-") count.value--;
});
return () => (
<Box>
<Text>Count: {count.value}</Text>
</Box>
);
});
const { lastFrame, stdin } = await render(Counter);
expect(lastFrame()).toContain("Count: 0");
await stdin.write("+");
expect(lastFrame()).toContain("Count: 1");
await stdin.write("-");
expect(lastFrame()).toContain("Count: 0");
});
API
render(component, options?)
Mounts a component in a fake terminal environment. Returns a RenderResult.
| Option | Type | Default | Description |
|---|---|---|---|
columns |
number |
100 |
Terminal width in columns |
rows |
number |
100 |
Terminal height in rows |
props |
object |
— | Props passed to the root component |
exitOnCtrlC |
boolean |
false |
Enable Ctrl+C exit handling |
interactive |
boolean |
true |
Run interactively so terminal.resize() re-lays-out and raw mode engages. false to test non-interactive behavior. |
RenderResult
| Property / Method | Description |
|---|---|
lastFrame(opts?) |
Latest rendered frame as a string |
frames |
Array of all captured frame snapshots |
stdin.write(data) |
Inject input (reaches useInput handlers) |
terminal |
Fake terminal — columns, rows, resize(), rawMode |
unmount() |
Tear down the app |
waitUntilExit() |
Settles when the app exits (rejects if exit(error)) |
waitUntilRenderFlush() |
Resolves after the next render cycle completes |
cleanup()
Unmounts all rendered apps. Auto-registered as a Vitest afterEach hook when globals: true is set. Call manually if your test runner doesn't expose a global afterEach.
Links
- vue-tui — monorepo root
@vue-tui/runtime— the core framework@vue-tui/cli— dev server with HMR
License
MIT