渡された小道具に応じて、異なる子コンポーネントがレンダリングされるコンポーネントがあります。アサート反応コンポーネント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)
を使用すると、実際には完全に
私のコンポーネントを作業仕様にアップしませんでした。
おかげで動作するように以下の例のためenzyme-to-jsonが必要になります
注 - 国連を正しく理解していれば、私は、少なくとも反応試験-レンダラを必要とする - 私が行ってきましたもう一度やり直してみてください。 これは、私のテストがうまく動作していることを知ったときです: 'expect(renderedComponent.find(ComponentA).length).toEqual(1)' 問題は私のコードが仕様その試験を書く)。 –
余分な依存関係を望まない理由は何ですか?これは特別なdev依存関係を必要とするだけなので、あなたのアプリケーションを膨らませることはありません。うまくいけばうれしいですが、私はスパンショットのテストを検討することを強くお勧めします。それはあなたに将来の多くの時間と頭痛を節約します。 – spirift
私はそれに良いことがあると思うことに同意する、作成/編集のテストを容易にするために、私はスナップショットをチェックするつもりです。事は...このプロジェクトのデッドラインであり、 –