浅いレンダリングが使用されている場合、Jestは子コンポーネントをレンダリングしませんが、定義されたとおりに返します。つまり、 "1レベルディープレンダリング"です。
例:
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" />
をテストするとき、それは「拡大」<ButtonWithIcon />
内部に含まれる<Icon />
ます:
<a class="btn btn-default">
<span class="glyphicon glyphicon-plus"></span>
Add Thing
</a>
で<ButtonWithIcon icon="plus" label="Add Item" />
をテストする場合浅いレンダラーである場合、をの内部に:浅いレンダリングの利点はここにある
<a class="btn btn-default">
<Icon type="plus" />
Add Thing
</a>
:<Icon />
コンポーネントのHTMLは、これまでに変更する必要があり、それは<Icon type="plus" />
子コンポーネントを期待して、親<ButtonWithIcon />
コンポーネントのテストがまだ正常に動作します、 HTMLは<span class="glyphicon glyphicon-plus"></span>
ではありません。