Helpers for testing LiveReact components and views.

Overview

LiveReact testing differs from traditional Phoenix LiveView testing in how components are rendered and inspected:

• In Phoenix LiveView testing, you use Phoenix.LiveViewTest.render_component/2 to get the final rendered HTML
• In LiveReact testing, render_component/2 returns an unrendered LiveReact root element containing the React component's configuration

This module provides helpers to extract and inspect React component data from the LiveReact root element, including:

• Component name and ID
• Props passed to the component
• Event handlers and their operations
• Server-side rendering (SSR) status
• Slot content
• CSS classes

Examples

# Render a LiveReact component and inspect its properties
{:ok, view, _html} = live(conn, "/")
react = LiveReact.Test.get_react(view)

# Basic component info
assert react.component == "MyComponent"
assert react.props["title"] == "Hello"

# Event handlers
assert react.handlers["click"] == JS.push("click")

# SSR status and styling
assert react.ssr == true
assert react.class == "my-custom-class"

Configuration

enable_props_diff

When set to false in your config, LiveReact will always send full props and not send diffs. This is useful for testing scenarios where you need to inspect the complete props state rather than just the changes.

# config/test.exs
config :live_react,
  enable_props_diff: false

When disabled, the props field returned by get_react/2 will always contain the complete props state, making it easier to write comprehensive tests that verify the full component state rather than just the incremental changes.