Phoenix LiveViewTest - render_hook/3 goes to parent LV

Phoenix Forum Questions / Help
, ,
1

I have a LiveView with a fairly beefy LiveComponent that renders inside of it. From my understanding of the docs you can pass render_hook/3 the element/2 of a LiveComponent and it should be able to handle the event.

My test LV looks like this:

 <.live_component module={LVTestWeb.ComponentTab}
                      id="component-tab" 
                      location={@location} 
                      user={@current_user} 
                      socket={@socket}/>

ComponentTab:

def render(assigns) do
    ~H"""
      <div class="row d-flex flex-row flex-nowrap" id="component" phx-hook="SortableHook">
      ... inner content ... 
     </div>
    """
  end

 
  def handle_event("reorder", params, socket),
    do: reorder(socket, params)

  @doc false
  @spec reorder(LiveView.Socket.t(), PBG.frontend_params_t()) ::
          LiveView.Socket.t()
  def reorder(socket, params) do
      ... reorder logic 
  end

The test:

   view
    |> element("#machine-schedule")
    |> render_hook("reorder", params)

This is the error:

 ** (FunctionClauseError) no function clause matching in AdminWeb.Liv eViewExample.Index.handle_event/3

From what I understand shouldn’t the event be going to the LV Component and not the parent LV? That’s how it works when users interact with the LV. What am I missing from render_hook/3

2

Hmm, did you define phx-target={@myself} on the #machine-schedule element?

If you are pushing events from a hook to a component, then you must pass an element , created with element/3, as first argument and it must point to a single element on the page with a phx-target attribute in it:

source: Phoenix.LiveViewTest.render_hook/3

3

Ah! That did the trick. I’m surprised this worked without the phx-target but it’s been in production for several months now without issue.

4

Experienced the same issue and I’m not sure if @travisf had the same setup as me, but something that tripped me was that in the JS portion of the code I was using this.pushEventTo with a target element. This made it that the application worked, but test wouldn’t.