如何开玩笑地打印已安装组件的子元素？

【问题标题】：How to print child elements of mounted component in jest?如何开玩笑地打印已安装组件的子元素？
【发布时间】：2021-08-25 07:29:15
【问题描述】：

我希望能够打印 wrapper.find('some selector') 的结果

我正在安装一个反应组件

wrapper = mount(
                <SomeReactComponent />
            );

我可以使用 console.log(wrapper.debug()) 打印包装器的全部内容，但我想知道是否有某种方法可以打印特定结果。我尝试了 console.log(wrapper.find('some selector').debug()) 但没有打印出来。

如何打印包装器中呈现的 html 的更具体部分？

【问题讨论】：

【解决方案1】：

由于您使用的是mount 方法，我猜您正在使用酶进行渲染。

在这种情况下，您可以使用具有一个参数选择器的简单find。该选择器是常规查询选择器。

const wrapper = mount(<MyComponent />);
console.log(wrapper.find('.my-component').at(0).html())

注意：如果您有更多具有my-component 的组件，它将返回元素数组，因此需要.at(0) 才能选择一项。

html() 将打印出纯 html 代码。

【讨论】：