What is tui-test-renderer?

A collection of ready-made testing patterns for TUI components using Ink and Bubble Tea.

Which frameworks does it cover?

Ink Testing Library for Ink components and Bubble Tea testing patterns for Go models.

How do I get started?

Install dependencies, copy the examples, and adapt them to your components and models.

tui-test-renderer

Scanned

npx machina-cli add skill a5c-ai/babysitter/tui-test-renderer --openclaw

Files (1)

SKILL.md

1.0 KB

TUI Test Renderer

Set up testing utilities for TUI components.

Generated Patterns

Ink Testing

import { render } from 'ink-testing-library';
import React from 'react';
import { MyComponent } from './MyComponent';

test('renders correctly', () => {
  const { lastFrame, stdin } = render(<MyComponent />);
  expect(lastFrame()).toContain('Expected text');
  stdin.write('\r'); // Simulate enter
  expect(lastFrame()).toContain('After enter');
});

Bubble Tea Testing

import (
  tea "github.com/charmbracelet/bubbletea"
  "testing"
)

func TestModel(t *testing.T) {
  m := initialModel()
  m, _ = m.Update(tea.KeyMsg{Type: tea.KeyEnter})
  view := m.View()
  if !strings.Contains(view, "expected") {
    t.Errorf("Expected view to contain 'expected'")
  }
}

Target Processes

tui-application-framework
cli-unit-integration-testing

Source

git clone https://github.com/a5c-ai/babysitter/blob/main/plugins/babysitter/skills/babysit/process/specializations/cli-mcp-development/skills/tui-test-renderer/SKILL.md

View on GitHub

Overview

Provides ready-made testing utilities for terminal UI components built with Ink and Bubble Tea. It ships concrete patterns for rendering checks with ink-testing-library and for validating Bubble Tea models, speeding up reliable UI verification in CLI apps.

How This Skill Works

Ink tests render components with ink-testing-library and inspect lastFrame() while simulating input via stdin. Bubble Tea tests drive the model with key events (e.g., KeyEnter) and verify the resulting view contains the expected text.

When to Use It

Unit test an Ink-based component to verify its frame contains key labels
Validate UI changes after simulated Ink user actions (e.g., pressing enter)
Test a Bubble Tea model's response to keyboard input via tea.KeyMsg
Ensure TUI behavior is reliable in CI by running Ink and Bubble Tea tests
Create reusable test templates from the provided Ink and Bubble Tea examples for a CLI app

Quick Start

Step 1: Install ink-testing-library and Bubble Tea testing dependencies
Step 2: Write an Ink test using render(<MyComponent />) and assert lastFrame()
Step 3: Write a Bubble Tea test using initialModel(), Update(tea.KeyMsg{Type: tea.KeyEnter}), and view()

Best Practices

Assert on lastFrame() content rather than the entire render tree
Keep Ink tests and Bubble Tea tests separate to avoid coupling
Mock stdin to deterministically simulate user input
Reuse the example patterns as templates to maintain consistency
Run tests in a headless or CI environment to avoid flakiness

Example Use Cases

Test an Ink component rendering a menu label and item
Verify the frame includes 'Welcome' after initial render
Test a Bubble Tea model responding to KeyEnter by advancing the view
Check a Bubble Tea app's welcome view contains expected text
Validate error state when required input is missing in a CLI workflow

Frequently Asked Questions

Add this skill to your agents