Компонент assert реагировать на наличие / отсутствие дочерних (Ren) компонентов с использованием jestjs

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)
  })
})

Я пытался утверждать это разными способами, но безуспешно.

Я знаю, как использовать метод поиска, например, для поиска div или h3, но я хотел бы проверить дочерние элементы против реагирующего компонента, а не корневого DOM-узла, который воспроизводит дочерний элемент, поскольку это может быть один и тот же DOM-узел в разных компонентах.

------------------- РЕДАКТИРОВАТЬ: -------------------

С помощью

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

на самом деле работает отлично

Мой компонент был не на высоте.

Answer 1

Попробуйте явно смонтировать компонент с реквизитом, который вы хотите в каждом it, Тогда, когда вы используете Jest, вы можете использовать .toMatchSnapshot() метод. Затем вы можете открыть созданные файлы моментальных снимков, чтобы убедиться, что все отображается так, как вы ожидаете.

Обратите внимание, что для работы приведенного ниже примера вам потребуется фермент-json

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()
  })