如何使用酶获得内部 html？（html内容）答案

【问题标题】：How to get inner html with enzyme? (html content)如何使用酶获得内部 html？（html内容）
【发布时间】：2020-12-01 13:22:43
【问题描述】：

在Enzyme中，我们如何获取元素的内容，但是作为html？

（.text() 返回文本，.html() 返回外部HTML）

const wrapper = shallow(<div><b>foo</b><span>cool</span></div>);
wrapper.text() // 'foocool' , like innerText in dom
wrapper.html() // '<div><b>foo</b><span>cool</span></div>' , like outerHTML in dom
wrapper.????() // '<b>foo</b><span>cool</span>' , <--------- like innerHTML in dom

编辑：

这可行，但没有更方便的方法吗？

wrapper.children().map(el => el.html()).join('')

【问题讨论】：

@ggorlen 没问题，是的，没错。当有多个孩子时，html() 返回 <div><b>foo</b><b>bar</b></div> 和 .children(0).html() 返回错误。
@ggorlen 我玩过它，这很有效，但是使用起来很不方便：wrapper.children().map(el => el.html()).join('')
是的，但你是对的，似乎应该有更好的方法。我对 Enzyme 不太熟悉，但在这里看线程。

标签： reactjs unit-testing testing enzyme

【解决方案1】：

expect(wrapper.html()).toContain('<b>foo</b><span>cool</span>')

【讨论】：

expect(wrapper.contains([ foo, cool ])).to.equal(true);