javascript - jestjsを使用して、反応コンポーネントの子(ren)の存在/不在をアサートします

Question

渡された小道具に応じて、さまざまな子コンポーネントをレンダリングするコンポーネントがあります。

私はテストに 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)
  })
})

これを主張するためにさまざまな方法を試しましたが、うまくいきませんでした。

たとえば、 find メソッドを使用して adivまたは ah3を検索する方法は知っていますが、異なるコンポーネントで同じDOMノードである可能性があるため、子がレンダリングするルートDOMノードではなく、反応コンポーネントに対して子をテストしたいと思います.

––––––––––––––––––編集: –––––––––––––––––</p>

使用する

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

実際には完璧に動作します

コンポーネントが仕様に達していませんでした。