   end
 
   test "react_component/3 passes on extra options to the html element" do
-    html = Phoenix.HTML.safe_to_string(react_component("test", %{}, class: "row", id: "content"))
+    html =
+      "test"
+      |> react_component(%{}, class: "row", id: "content")
+      |> Phoenix.HTML.safe_to_string()
 
     expected =
       "<div class=\"row\" data-react-class=\"test\" data-react-props=\"{}\" data-react-target-id=\"\" id=\"content\"></div>"

  end

  test "react_component/1 returns a renderable div" do
    html = Phoenix.HTML.safe_to_string(react_component("test"))
    assert String.match?(html, ~r|^<div.*></div>$|)
  end

  test "react_component/1 returns a renderable div with data-react-class containing component name" do
    html = Phoenix.HTML.safe_to_string(react_component("test"))
    assert String.match?(html, ~r|data-react-class="test"|)
  end

  test "react_component/2 returns a renderable div with data-react-props containing props list" do
    html = Phoenix.HTML.safe_to_string(react_component("test", my: "props"))

    expected =
      "<div data-react-class=\"test\" data-react-props=\"{&quot;my&quot;:&quot;props&quot;}\"></div>"

  end

  test "react_component/3 accepts a target div option" do
    html =
      "test"
      |> react_component(%{}, target_id: "test-id")
      |> Phoenix.HTML.safe_to_string()

    expected =
      "<div data-react-class=\"test\" data-react-props=\"{}\" data-react-target-id=\"test-id\"></div>"
