ReactのJestユニットテストで浅いレンダリングとは何ですか？このビデオでは

Question

（2分）：1時40分のマークの周りで

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

、語り手は、あなたが見ることができるように、このオブジェクトは、当社のレンダリング出力の深い唯一のレベルであり、」言いますこれは、単体テストをもっと簡単に書くことができるようになります。というのも、コンポーネントがレンダリングされた環境ではなく、コンポーネントについて心配する必要があるからです。

「1レベル深い」とはどういう意味ですか？ CoolComponentの例では、2レベルのディープレンダリングされた出力はどのように見えますか？

Answer 1

浅いレンダリングが使用されている場合、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>ではありません。