Components, hooks, and Context

Find the instance

npx @genie-react/cli call react_find_components \
  '{"query":"CheckoutForm","exact":true}' --json

Example output:

{
  "matches": [
    {
      "id": 42,
      "name": "CheckoutForm",
      "path": "App > CheckoutForm",
      "kind": "function",
      "props": { "cartId": "cart-17" },
      "source": {
        "file": "src/CheckoutForm.tsx",
        "line": 18,
        "column": 1,
        "functionName": "CheckoutForm",
        "sourceMapConfidence": "mapped"
      },
      "isLibrary": false
    }
  ]
}

The ID and props are illustrative. Always use the values returned by the mounted app.

Inspect props and hooks

npx @genie-react/cli call react_inspect_component \
  '{"id":42,"depth":3}' --json

Use the returned stateIndex when changing a useState or useReducer value:

npx @genie-react/cli call react_override_hook_state \
  '{"id":42,"stateIndex":0,"value":"review"}' --json

Read or test Context

npx @genie-react/cli call react_inspect_context \
  '{"id":42,"depth":3}' --json

npx @genie-react/cli call react_override_context \
  '{"id":42,"context":"ThemeContext","value":{"mode":"dark"}}' --json

After each override, check the returned result and verify the intended value in the visible UI. Component IDs can become stale after reload or remount; discover the current instance again.

Map React to the UI

These mappings require a browser DOM. Use agent-device for native UI checks.

From a component to its elements:

npx @genie-react/cli call react_dom_for_component '{"id":42,"limit":5}' --json

From a visible element to its owner:

npx @genie-react/cli call react_component_for_dom \
  '{"selector":"[data-testid=checkout]"}' --json

For StyleX apps, inspect the same DOM target with stylex_inspect to locate its applied style definitions and CSS declarations. See StyleX inspection for configuration and coverage limits.

Clean up

npx @genie-react/cli call react_reset_overrides '{}'

Require remaining: 0 in the reset result, then verify the original visible value has returned. Report the source location, tested override, visible result, and cleanup result.