通过酶安装时，ReduxForm 呈现两次

Question

在将 react-redux 升级到 6.0.0 并将 redux-form 升级到 8.1.0（连接的组件不再存储在 props 中）后，我正在尝试调整我的测试以遵循重大更改

我需要在测试中将连接的组件从 react-redux 包装起来，并使用 mount 到达实际组件，但现在 ReduxForm 被渲染了两次。我尝试使用 hostNodes() 方法，但它 returns 0 个元素。有什么解决办法吗？

这是测试：

import React from 'react'
import { mount } from 'enzyme'
import configureStore from 'redux-mock-store'
import { Provider } from 'react-redux'
import PasswordResetContainer from './PasswordResetContainer'

describe('PasswordResetContainer', () => {
  it('should render only one ReduxForm', () => {
    const mockStore = configureStore()
    const initialState = {}
    const store = mockStore(initialState)
    const wrapper = mount(<Provider store={store}><PasswordResetContainer /></Provider>)

    const form = wrapper.find('ReduxForm')
    console.log(form.debug())
    expect(form.length).toEqual(1)
  })

而 PasswordResetContainer 看起来像这样：

import { connect } from 'react-redux'
import { reduxForm } from 'redux-form'
import PasswordReset from './PasswordReset'
import { resetPassword } from '../Actions'

export const validate = (values) => {
  const errors = {}

  if (!values.email) {
    errors.email = 'E-mail cannot be empty.'
  } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(values.email)) {
    errors.email = 'Invalid e-mail.'
  }
  return errors
}

export default connect(null, { resetPassword })(
  reduxForm(
    { form: 'passwordReset',
      validate
    })(PasswordReset))

测试输出如下：

PasswordResetContainer › should render only one ReduxForm

    expect(received).toEqual(expected)

    Expected value to equal:
      1
    Received:
      2

编辑（找到部分解决方案）：

当我改变的时候wrapper.find('ReduxForm') 进入 wrapper.find('ReduxForm>Hoc>ReduxForm') 它开始工作。
为什么我需要做这样的魔术？

Answer 1

修复了要创建的库 mod，但如果表单相同，解决此问题的一种快速方法是在 find 之后调用 first() 以便

wrapper.find('ReduxForm')

看起来像：

wrapper.find('ReduxForm').first()

通过酶安装时，ReduxForm 呈现两次

ReduxForm is rendered twice when mounted via enzyme

redux-form

enzyme

react-redux