如何将Elm的Html节点转为字符串以获取elm-test更清晰的报错信息

问题原因 #

Elm的Html类型是不透明类型，内部结构没有对外暴露，所以直接用Expect.equal对比两个Html值的时候，测试运行器无法序列化它的内部内容，只会输出<internals>占位符。

解决方案 #

方案1：使用专用HTML测试工具（优先推荐） #

用Elm官方维护的测试扩展包提供的Html.Test模块做HTML断言，失败时会自动输出可读的结构差异，同时支持更灵活的断言规则，比如匹配属性、类名、部分子节点，不需要完全对齐整个节点树：

import Test.Html.Query as Query
import Test.Html.Selector exposing (tag, text)

-- 测试用例写法
test "viewFunc 输出正确的span内容" <|
    \_ ->
        viewFunc
            |> Query.fromHtml
            |> Query.find [ tag "span" ]
            |> Query.has [ text "hello world" ]

方案2：转HTML为字符串做精确对比 #

如果需要做全节点的精确匹配，可以将两个Html节点都转为标准HTML字符串后再对比，测试失败时会直接输出两份字符串的差异：

import Html.ToString exposing (toString)

-- 测试用例
test "viewFunc 输出完全匹配预期HTML" <|
    \_ ->
        viewFunc
            |> toString
            |> Expect.equal (toString <| span [] [ text "hello world" ])

内容的提问来源于stack exchange，提问作者viam0Zah