Testing

Multinaire UI components expose testID values so you can locate elements in automated tests (Detox, RNTL, etc.) without coupling your tests to implementation details.

Automatic testID assignment

Most components derive a testID automatically so you rarely need to set one explicitly.

Component	Auto testID source
Typography	The string value of children
Input	The placeholder prop
PickerButton	The placeholder prop
MediaPickerButton	The placeholder prop
Interactive components with title	The title prop (e.g. Button, ActionButton, MenuButton)

Pass an explicit testID prop to override the automatic value.

Built-in structural testID markers

The following elements always carry fixed testID values — no configuration needed.

Element	testID
Popup overlay	"modal-overlay"
PopupHeader close button	"modal-close"
StackHeader back button	"navigation-back"
StackHeader close button	"navigation-close"
InputWrapper clear (×) button	"clear-input"
DateTimePicker previous-month button	"previous"
DateTimePicker next-month button	"next"

Pagination markers

Pagination sets dynamic testID values that reflect the current step state:

Element	testID
Animated step label	The current item string (e.g. "Address")
Focused step container	"<item>-is-focused" (e.g. "Address-is-focused")

Example — querying elements in Detox

// Navigation
await element(by.id('navigation-back')).tap();
await element(by.id('navigation-close')).tap();

// Form inputs
await element(by.id('Enter email')).typeText('user@example.com');
await element(by.id('clear-input')).tap();

// Typography
await expect(element(by.id('Welcome'))).toBeVisible();

// Pagination
await expect(element(by.id('Payment-is-focused'))).toBeVisible();

// DateTimePicker
await element(by.id('previous')).tap();
await element(by.id('next')).tap();

// Modal
await element(by.id('modal-close')).tap();

Overriding automatic IDs

Pass testID explicitly whenever the automatic value would be ambiguous (e.g. two inputs sharing the same placeholder):

<Input
  placeholder="Name"
  testID="first-name-input"
  value={firstName}
  onChangeText={setFirstName}
/>
<Input
  placeholder="Name"
  testID="last-name-input"
  value={lastName}
  onChangeText={setLastName}
/>