时间戳

首页 > 解决方案 > 如何开玩笑地打印已安装组件的子元素？

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

问题描述

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

我正在安装一个反应组件

wrapper = mount(
                <SomeReactComponent />
            );

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

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

标签： javascriptreactjsjestjsenzyme

解决方案

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

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

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

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

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

API参考： https ://enzymejs.github.io/enzyme/docs/api/ReactWrapper/find.html

推荐阅读