React 测试库可处理 redux-form 问题

Question

尝试测试 redux-forms 组件时遇到问题。我不断收到错误 FormSection 必须位于用 reduxForm() 装饰的组件内 我尝试了几种不同的方法来实现此目的，但结果有些相同。这是测试代码。

import { createStore, combineReducers } from 'redux';
import { Provider } from 'react-redux';
import { reducer as formReducer } from 'redux-form';
import { render, screen, cleanup, fireEvent} from '@testing-library/react'
import "@testing-library/jest-dom";
import ContactInformation from '../components/FormSections/ContactInformation'


// Create a reducer that includes the form reducer from redux-form
const rootReducer = combineReducers({
  form: formReducer,
});

const store = createStore(rootReducer);

const renderContactInformation = () => {
  render(
    <Provider store={store}>
      <ContactInformation />
    </Provider>,
  )
}

describe("<ContactInformation />", () => {
  test('it should render fields', () => {
    renderContactInformation()
    const input = screen.getByLabelText("email")
    console.log(input)
        }
      )

})

有什么想法吗？这些似乎应该有效，但我认为我迷失了方向，或者也许我只是困惑了自己。任何帮助将不胜感激。

这是联系信息的代码。

class ContactInformation extends Component {

  zipCodeLocation = (zip) => {
    const { dispatch, updateField, formName } = this.props

    new Promise((resolve, reject) => {
      dispatch({
        type: actions.ZIP_CODE_SEARCH,
        zipCode: zip,
        resolve,
        reject,
      })
    })
      .then((response) => {
        dispatch(updateField(formName, "contactInformation.state", response.state))
        dispatch(updateField(formName, "contactInformation.city", response.city))
      })
      .catch((error) => console.log({ error }))
  }

  render() {
    const { checkEmailExistence, emailExists, requiredEmail,isExistingInvestor } = this.props
    console.log(this.props)
    const isDisable = isExistingInvestor === 'yes' ? 'disabled':''
    const isRequired = this.props.isOnboarding
    const title = 'Contact Information'
    return (
      <>
        <h3 className="formHeadingBorder">{title}</h3>
        <FormSection style={{paddingTop: "5%"}} name="contactInformation">
          <Form.Item label="First Name" required>
            <FirstNameField name="firstName" requiredMark check={isDisable} />
          </Form.Item>
          <Form.Item label="Middle Name">
            <MiddleInitialField check={isDisable} />
          </Form.Item>
          <Form.Item label="Last Name" required>
            <LastNameField name="lastName" check={isDisable} />
          </Form.Item>
          <Form.Item required={requiredEmail} label="Email Address" validateStatus={emailExists ? "error" : undefined}>
            <EmailField name="email" placeholder="Email Address" required={requiredEmail} check={isDisable} />
          </Form.Item>
          <Form.Item label="Phone Number">
            <div className={styles.multiFormItem}>
              <div className={styles.phoneNumberField}>
                <PhoneNumberField name="phoneNumber" placeholder="Phone Number" check={isDisable} />
              </div>
              <div className={styles.inlineFormItem}>
                <RadioField name="isMobile" label="Mobile">
                  <Radio value="yes">Yes</Radio>
                  <Radio value="no">No</Radio>
                </RadioField>
              </div>
            </div>
          </Form.Item>
          <Form.Item label="Physical Address">
            <StreetOneField placeholder="Address Line 1" check={isDisable} isStreetRequired={isRequired} />
          </Form.Item>
          <Form.Item label=" ">
            <StreetTwoField placeholder="Address Line 2" check={isDisable} />
          </Form.Item>
          <Form.Item label="Postal Code">
            <div className={styles.multiFormItem}>
              <ZipField isZipRequired={isRequired} placeholder="Postal Code" onBlur={e => this.zipCodeLocation(e.target.value)} check={isDisable} />
              <StateField check={isDisable} />
            </div>
          </Form.Item>
          <Form.Item label="City">
            <CityField isCityRequired={isRequired} placeholder="City" check={isDisable} />
          </Form.Item>
          <Form.Item label="Country">
            <CountryField placeholder="Country" />
          </Form.Item>
        </FormSection>
      </>
    )
  }
}

export default connect(null, (dispatch) => {
  return{
    dispatch,
    updateField: (formName, field, data) => dispatch(change( formName, field, data ))
  }
},
  )(ContactInformation)