Question

在此视频中（2分钟）：

https://egghead.io/lessons/react-testing-intro-to-shallow-rendering

在大约1:40标记处，叙述者说＆＃34;所以你可以看到，这个对象只是我们渲染输出的一个深度，这使得编写单元测试变得更加简单，因为我们只需要担心组件，而不是组件呈现的环境。＆＃34;

他是什么意思＆＃34;一个深度＆＃34;？在CoolComponent示例的上下文中，两级深度渲染输出可能是什么样的？

Answer 1

当使用浅渲染时，Jest不会渲染子组件，而是按照定义返回它们 - ergo＆＃34;一级深度渲染＆＃34;。

一个例子：

const Icon = (props) => {
    const className = 'glyphicon glyphicon-' + props.type;
    return (
        <span className={className} ariaHidden={true}></span>
    )
};

const ButtonWithIcon = (props) => (
    <a className="btn btn-default">
        <Icon type={props.icon} />
        {props.label}
    </a>
);

使用默认渲染器测试<ButtonWithIcon icon="plus" label="Add Item" />时，它会“展开”<Icon />中包含的<ButtonWithIcon />：
```
<a class="btn btn-default">
    <span class="glyphicon glyphicon-plus"></span>
    Add Thing
</a>
```
使用浅呈现器测试<ButtonWithIcon icon="plus" label="Add Item" />时，它不会呈现<Icon />中包含的<ButtonWithIcon />：
```
<a class="btn btn-default">
    <Icon type="plus" />
    Add Thing
</a>
```

浅层渲染的好处在于：如果<Icon />组件的HTML被更改，则父<ButtonWithIcon />组件的测试仍然可以正常运行，因为它需要<Icon type="plus" />子组件，而不是<span class="glyphicon glyphicon-plus"></span> HTML。

React中的Jest单元测试中的浅层渲染是什么？

1 个答案: