2017-02-17 8 views
0

渡された小道具に応じて、異なる子コンポーネントがレンダリングされるコンポーネントがあります。アサート反応コンポーネントjestjsを使用した子要素の有無

jestjsをテストに使用しています。親コンポーネントで渡された小道具に基づいて、「親」コンポーネントが適切な子/子をレンダリングすると主張したいと思います。

簡略化されたスニペット:

親コンポーネント

import ComponentA from './componentA' 
import ComponentB from './componentB' 

function ParentComponent(props) { 
    const { step } = props 
    switch(step) { 
    case 'A': 
     return (<ComponentA />) 
    case 'B': 
     return (<ComponentB />) 
    } 
} 

試験

import ParentComponent from './ParentComponent' 
import ComponentA from './ComponentA' 
import ComponentB from './ComponentB' 

const renderCompo = (props = {}) => mount(
    <ParentComponent step={'A'} {...props} /> 
) 

describe('ParentComponent',() => { 

    it('should render the <ComponentA /> as its child when passed `A` as the value of step props',() => { 
    const renderedComponent = renderCompo() 
    // I know this is not correct use of find but this serve as illustration of what I'm trying to assert 
    expected(renderedComponent.find(<ComponentA />).length).toEqual(1) 
    }) 
    it('should NOT render the <ComponentB /> as its child when passed `A` as the value of step props',() => { 
    const renderedComponent = renderCompo() 
    // I know this is not correct use of find but this serve as illustration of what I'm trying to assert 
    expected(renderedComponent.find(<ComponentA />).length).toEqual(0) 
    }) 

    it('should render the <ComponentB /> as its child when passed `B` as the value of step props',() => { 
    const renderedComponent = renderCompo({ step: 'B' }) 
    expected(renderedComponent.find(<ComponentB />).length).toEqual(1) 
    }) 
    it('should render the <ComponentA /> as its child when passed `B` as the value of step props',() => { 
    const renderedComponent = renderCompo({ step: 'B' }) 
    expected(renderedComponent.find(<ComponentB />).length).toEqual(0) 
    }) 
}) 

ノー運とこれをアサートするための様々な方法を試してみました。

私はdivまたはh3の検索メソッドを使用する方法を知っていますが、反応コンポーネントに対して子をテストしたいと思いますが、子がレンダリングするルートDOMノードはテストしたくありません異なるコンポーネントの同じDOMノード

------------------- EDIT: -------------------

expect(renderedComponent.find(ComponentA).length).toEqual(1) 

を使用すると、実際には完全に

私のコンポーネントを作業仕様にアップしませんでした。

答えて

1

itに必要な小道具でコンポーネントを明示的にマウントしてみてください。次に、Jestを使用しているときに.toMatchSnapshot()メソッドを使用できます。生成されたスナップショットファイルを開いて、すべてが期待通りにレンダリングされていることを確認できます。あなたは余分な依存関係を避けるためにしようと、応答について

it('should render the <ComponentA /> as its child when passed `A` as the value of step props',() => { 
    const wrapper = mount(<ParentComponent step={'A'} />) 
    expected(toJson(wrapper)).toMatchSnapshot() 
    }); 
it('should render the <ComponentB /> as its child when passed `B` as the value of step props',() => { 
    const wrapper = mount(<ParentComponent step={'B'} />) 
    expected(toJson(wrapper)).toMatchSnapshot() 
    }) 
+0

おかげで動作するように以下の例のためenzyme-to-jsonが必要になります

注 - 国連を正しく理解していれば、私は、少なくとも反応試験-レンダラを必要とする - 私が行ってきましたもう一度やり直してみてください。 これは、私のテストがうまく動作していることを知ったときです: 'expect(renderedComponent.find(ComponentA).length).toEqual(1)' 問題は私のコードが仕様その試験を書く)。 –

+0

余分な依存関係を望まない理由は何ですか?これは特別なdev依存関係を必要とするだけなので、あなたのアプリケーションを膨らませることはありません。うまくいけばうれしいですが、私はスパンショットのテストを検討することを強くお勧めします。それはあなたに将来の多くの時間と頭痛を節約します。 – spirift

+0

私はそれに良いことがあると思うことに同意する、作成/編集のテストを容易にするために、私はスナップショットをチェックするつもりです。事は...このプロジェクトのデッドラインであり、 –

関連する問題