酵素/反応試験でレンダーとシャローをいつ使用しますか？

Question

この質問を投稿する前に、私はsqa stackexchangeで検索しようとしましたが、浅い部分についての投稿は見つかりませんでした。そこでレンダリングするので、誰かが私をここで助けてくれることを願っています。

反応コンポーネントのテストでは、いつ浅くレンダーする必要がありますか？ airbnbドキュメントに基づいて、私は2つの違いについていくつかの意見作った：それは「親」のコンポーネントを使用する必要がありますので、浅いので

1. を、コンポーネントのユニットとしてをテストしています。 （テーブル、ラッパーなど）

2. レンダリングは子コンポーネント用です。

私はこの質問をした理由は、私は（ドキュメントは、彼らは非常に似ていると言うが）私は

だから、どのように使用すべき1見つけ出すのに苦労を抱えているということです特定のシナリオでどちらを使用するのか知っていますか？酵素docs 1として

Answer 1

：フルDOMレンダリングのため

mount(<Component />)あなたはDOM APIと相互作用することができる要素を持っているユースケースに最適です、または完全にコンポーネントをテストするために、完全なライフサイクルを必要とするかもしれない（つまり、浅いレンダリングのため、componentDidMountなど）

対

shallow(<Component />)ユニットとしてコンポーネントをテストするに自分自身を制限するために、そしてあなたのテストは、間接的に子コンポーネントの動作にアサートされていないことを確認するのに便利です。

対静的HTMLにコンポーネントを反応レンダリングし、得られたHTMLの構造を分析するために使用される

render。

レンダリングたとえば、あなたがスペックランナーとしてAVAを使用して、この（やや不自然）の例のような何かを行うことができますので、あなたはまだ、浅いにおける基礎となる「ノード」を参照してくださいすることができます

let wrapper = shallow(<TagBox />); 

const props = { 
    toggleValue: sinon.spy() 
}; 

test('it should render two top level nodes', t => { 
    t.is(wrapper.children().length, 2); 
}); 

test('it should safely set all props and still render two nodes', t => { 
    wrapper.setProps({...props}); 
    t.is(wrapper.children().length, 2); 
}); 

test('it should call toggleValue when an x class is clicked', t => { 
    wrapper.setProps({...props}); 
    wrapper.find('.x').last().simulate('click'); 
    t.true(props.toggleValue.calledWith(3)); 
}); 

お知らせをその、設定小道具とセレクタを見つけるとの合成イベントはすべて浅いレンダリングでサポートされているため、ほとんどの場合、それを使用することができます。

しかし、コンポーネントの完全なライフサイクルを取得することはできません。そのため、componentDidMountで何かが起きることが予想される場合は、mount(<Component />)を使用してください。

このテストでは、上記の浅いが、あなただけのhtmlで提供します

renderをレンダリングをレンダリングするかを渡すので、あなたはありません、コンポーネントのcomponentDidMount

test.only('mount calls componentDidMount', t => { 

    class Test extends Component { 
     constructor (props) { 
      super(props); 
     } 
     componentDidMount() { 
      console.log('componentDidMount!'); 
     } 
     render() { 
      return (
       <div /> 
      ); 
     } 
    }; 

    const componentDidMount = sinon.spy(Test.prototype, 'componentDidMount'); 
    const wrapper = mount(<Test />); 

    t.true(componentDidMount.calledOnce); 

    componentDidMount.restore(); 
}); 

をスパイするSinonを使用していますまだこのようなことをすることができます：

test.only('render works', t => { 

    // insert Test component here... 

    const rendered = render(<Test />); 
    const len = rendered.find('div').length; 
    t.is(len, 1); 
}); 

これが役立つことを願っています！