LiveReact.Test (live_react v1.0.0)

View Source

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"

Summary

Functions

get_react(view, opts \\ [])

Extracts React component information from a LiveView or HTML string.

Functions

get_react(view, opts \\ [])

Extracts React component information from a LiveView or HTML string.

When multiple React components are present, you can specify which one to extract using either the :name or :id option.

Returns a map containing the component's configuration:

  • :component - The React component name (from v-component attribute)
  • :id - The unique component identifier (auto-generated or explicitly set)
  • :props - The decoded props passed to the component
  • :handlers - Map of event handlers (v-on:*) and their operations
  • :slots - Base64 encoded slot content
  • :ssr - Boolean indicating if server-side rendering was performed
  • :class - CSS classes applied to the component root element

Options

  • :name - Find component by name (from v-component attribute)
  • :id - Find component by ID

Examples 

# From a LiveView, get first React component
{:ok, view, _html} = live(conn, "/")
react = LiveReact.Test.get_react(view)

# Get specific component by name
react = LiveReact.Test.get_react(view, name: "MyComponent")

# Get specific component by ID
react = LiveReact.Test.get_react(view, id: "my-component-1")