# @mwillbanks/tuil-testing-ink

Source: /tuil/docs/reference/packages/testing-ink
Locale: en

Ink-backed renderer and interaction harness for testing tuil applications.



## Overview [#overview]

Ink-backed renderer and interaction harness for testing tuil applications.

`@mwillbanks/tuil-testing-ink` is independently installable and also participates in the
umbrella `@mwillbanks/tuil` runtime where applicable.

## Installation [#installation]

<CodeBlockTabs defaultValue="npm">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npm install @mwillbanks/tuil-testing-ink
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm add @mwillbanks/tuil-testing-ink
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn add @mwillbanks/tuil-testing-ink
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun add @mwillbanks/tuil-testing-ink
    ```
  </CodeBlockTab>
</CodeBlockTabs>

## How it operates [#how-it-operates]

The Ink test renderer creates a real tuil runtime and semantic registry around `ink-testing-library`, then coordinates input, resize, frame, event, focus, and cleanup helpers.

<Mermaid
  chart="flowchart LR
  S0[&#x22;render runtime&#x22;]
  S1[&#x22;interact&#x22;]
  S2[&#x22;flush&#x22;]
  S3[&#x22;inspect&#x22;]
  S4[&#x22;unmount&#x22;]
  S0 --> S1
  S1 --> S2
  S2 --> S3
  S3 --> S4"
/>

## API [#api]

| API                                                                                           | Signature                       | Description                           |
| --------------------------------------------------------------------------------------------- | ------------------------------- | ------------------------------------- |
| [`cleanup`](/tuil/docs/reference/packages/testing-ink/api/cleanup)                                 | `function cleanup`              | Public function cleanup.              |
| [`clickPointerTarget`](/tuil/docs/reference/packages/testing-ink/api/click-pointer-target)         | `function clickPointerTarget`   | Public function clickPointerTarget.   |
| [`dragPointerTarget`](/tuil/docs/reference/packages/testing-ink/api/drag-pointer-target)           | `function dragPointerTarget`    | Public function dragPointerTarget.    |
| [`normalizeTerminalFrame`](/tuil/docs/reference/packages/testing-ink/api/normalize-terminal-frame) | `export normalizeTerminalFrame` | Public export normalizeTerminalFrame. |
| [`renderTuil`](/tuil/docs/reference/packages/testing-ink/api/render-tuil)                          | `function renderTuil`           | Public function renderTuil.           |
| [`screen`](/tuil/docs/reference/packages/testing-ink/api/screen)                                   | `constant screen`               | Public constant screen.               |
| [`SemanticScreen`](/tuil/docs/reference/packages/testing-ink/api/semantic-screen)                  | `export SemanticScreen`         | Public export SemanticScreen.         |
| [`TuilTestInstance`](/tuil/docs/reference/packages/testing-ink/api/tuil-test-instance)             | `interface TuilTestInstance`    | Public interface TuilTestInstance.    |
| [`TuilUser`](/tuil/docs/reference/packages/testing-ink/api/tuil-user)                              | `class TuilUser`                | Public class TuilUser.                |
| [`user`](/tuil/docs/reference/packages/testing-ink/api/user)                                       | `constant user`                 | Public constant user.                 |

## Events and lifecycle [#events-and-lifecycle]

Tests can inspect event history and wait on rendered state after input settles.

All subscriptions and registrations return a disposer or belong to an owning
runtime that disposes them in reverse order.

## Example [#example]

```tsx
import { renderTuil } from "@mwillbanks/tuil-testing-ink";

const view = renderTuil(<Button id="run">Run</Button>);
await view.press("enter");
```

## Related [#related]

* [Package architecture](/tuil/docs/concepts/packages)
* [Events](/tuil/docs/concepts/events)
* [Testing](/tuil/docs/guides/testing)