How do I pass an inner_block to Phoenix.LiveViewTest.render_component in a test?

Hello everyone!

Does anyone know the right way to pass an inner_block to Phoenix.LiveViewTest.render_component in a test?

Example:

assigns = []
render_component(ModalComponent, id: :modal, inner_block: ~H"""
      <button>Close modal</button>
      """)

In my ModalComponent I render the block with:

<div class="modal-content">
     <%= render_slot(@inner_block) %>
</div>

When I run the above, I get a:

     ** (KeyError) key :inner_block not found in: %Phoenix.LiveView.Rendered{dynamic: #Function<1.53563550/1 in DataIngestionWeb.ModalComponentTest."test the modal renders its inner block and default buttons"/1>, fingerprint: 264391584146384125242153930287832393521, root: true, static: ["<button>Close modal</button>"]}

Note that this is a stateful component, so using rendered_to_string isn’t an option.

I tried out a few workarounds:

  1. Using ~H"""<.live_component module={ModalComponent}>...</.live_component>""" . That gives me another error.
  2. Doing:
inner_block = fn _, _ ->
    assigns = []
      ~H"""
      <button>Close modal</button>
      """
    end
render_component(ModalComponent, id: :modal, inner_block: inner_block)

This works as long as I’m using the deprecated render_block (instead of render_slot) in my component. Not ideal.

I hope that somebody who’s more accustomed to LiveVIew’s internals than me can shed some light on this issue.

Thanks!

1 Like