Как протестировать дочерние компоненты из PrefetchResourceContainer?

Question

Я тестирую свою балансовую единицу с помощью Enzyme и Jest и столкнулся с проблемой с некоторыми из наших компонентов класса.

Я пробовал несколько способов поверхностного рендеринга, но безрезультатно.Самый близкий к тому, что мне нужно, это код.

beforeEach(() => {
    component = shallow(<LoanFilesContainer store={store}/>)
  })

  it('LoanFilesContainer snapshot shallow renderer test', () => {
    expect(component).toMatchSnapshot()
  })


  it('LoanFilesContainer snapshot test', () => {
    const prefetch_wrapper = mount(component.get(0))
    console.log(prefetch_wrapper.childAt(0).debug())
  })

Выше вы можете увидеть мой тест для prefetch_wrapper.Я печатаю его на консоли и получаю хорошую информацию, но не совсем то, что мне нужно.Эта запись журнала возвращает:

<PrefetchResourceContainer store={{...}} loan_csv_mapping={{...}} default_allocation_mode="automatically" is_using_amc={false} actions={{...}} storeSubscription={{...}} loans={{...}}>
  <Connect(PrefetchResourceContainer) store={{...}} loan_csv_mapping={{...}} default_allocation_mode="automatically" is_using_amc={false} actions={{...}} storeSubscription={{...}} loans={{...}}>
    <PrefetchResourceContainer store={{...}} loan_csv_mapping={{...}} default_allocation_mode="automatically" is_using_amc={false} actions={{...}} storeSubscription={{...}} loans={{...}} fees={{...}}> 
      <Connect(Connect(LoanFilesContainer)) store={{...}} loan_csv_mapping={{...}} default_allocation_mode="automatically" is_using_amc={false} actions={{...}} storeSubscription={{...}} loans={{...}} fees={{...}}>
        <Connect(LoanFilesContainer) store={{...}} loan_csv_mapping={{...}} default_allocation_mode="automatically" is_using_amc={false} actions={{...}} storeSubscription={{...}} loans={{...}} fees={{...}} orderAdd={{...}}>
          <LoanFilesContainer store={{...}} loan_csv_mapping={{...}} default_allocation_mode="automatically" is_using_amc={false} actions={{...}} storeSubscription={{...}} loans={{...}} fees={{...}} orderAdd={{...}} upload1003={{...}}> 
            <main className="main"> 
              <Loader>
                <div className="loader-container">
                  <img width={100} src={{...}} /> 
                </div>
              </Loader>
            </main>
          </LoanFilesContainer>
        </Connect(LoanFilesContainer>
      </Connect(Connect(LoanFilesContainer))> 
    </PrefetchResourceContainer> 
  </Connect(PrefetchResourceContainer)>
</PrefetchResourceContainer>

Мне нужно получить состояние от LoanFilesContainer.Как можно глубже погрузиться в DOM, чтобы получить доступ к состоянию LoanFilesContainer.

Мне нужно обойти обертки Connect и попасть в LoanFilesContainer.Как я могу это сделать?

Answer 1

Я нашел решение. Вы можете использовать функцию find () для фильтрации через Wrapper и захвата нужного вам элемента. Код, который исправил это для меня, менялся:

it('LoanFilesContainer snapshot test', () => {
    const prefetch_wrapper = mount(component.get(0))
    console.log(prefetch_wrapper.childAt(0).debug())
  })

до:

it('LoanFilesContainer snapshot test', () => {
    const prefetch_wrapper = mount(component.get(0))
    const loanContainerWrapper = prefetch_wrapper.find('LoanFilesContainer')
    const state = loanContainerWrapper.instance().state
  })