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（）函数来筛选包装器并获取所需的元素。为我修复此问题的代码正在更改：

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

如何从PrefetchResourceContainer测试子组件？

1 个答案: