单元测试错误：字段必须在用 reduxForm() 装饰的组件内

Posted 2023-02-21

【中文标题】单元测试错误：字段必须在用 reduxForm() 装饰的组件内

【英文标题】：Unit test error: Field must be inside a component decorated with reduxForm()

【发布时间】：2019-09-26 09:47:21

【问题描述】：

我正在尝试测试我的容器，但在进行测试之前它做的第一件事就是这个错误：

      27 |   ;
      28 |
    > 29 |   const root = mount(
         |                ^
      30 |     <Provider store=store>
      31 |       <IntlProvider ...props>
      32 |         <ConfirmLeadContainer ...props />

但是，我的容器中有一个 redux 表单，我正在使用 recompose：

const enhance = compose(
  withAnalytics,
  withRouter,
  injectIntl,
  connect(null, mapDispatchToProps),
  flattenProp('params'),
  flattenProp('User'),
  withProps(createProps),
  withHandlers(handlers),
  reduxForm(
    form: 'confirmlead',
  ),
  lifecycle(
    componentDidMount() 
      const 
        cognitoId,
       = this.props;


        showExpiredLinkModal( cognitoId, event: 'accountStartAccountActivation' );

);

这是我的测试：

jest.mock('../../Analytics/track');
jest.mock('./ConfirmLead');
jest.mock('../updatePasswordWithCode');

const store = configureMockStore()(
  form: 'confirmLead',
);

const setup = (newProps) => 
  const props = 
    locale: 'en',
    router: 
      replace: jest.fn(),
    ,
    ...newProps,
  ;

  const root = mount(
    <Provider store=store>
      <IntlProvider ...props>
        <ConfirmLeadContainer ...props />
      </IntlProvider>
    </Provider>
    ,
  );

  const wrapper = root.find(ConfirmLead);

  return 
    root,
    wrapper,
    props,
  ;
;

describe('ConfirmLeadContainer', () => 
  beforeEach(() => 
    store.clearActions();
  );

  it('sets the firstName prop equal to firstName from match query params', () => 
    const  wrapper  = setup(
      match: 
        params: 
          cognitoId: '101101101',
          confirmationCode: '12121212',
          confirmationCodeExpiration: Date.now(),
        ,
        location: 
          query:  firstName: 'joseph' ,
        ,
      ,
    );

我不明白为什么或在哪里添加 redux 表单？以前没见过这个错误，而且这个错误对我没用...

任何想法我可以做些什么来摆脱错误？

【参考方案1】：

我也面临同样的问题。

 Error: Field must be inside a component decorated with reduxForm()
        at new Field (webpack:///~/redux-form/lib/createField.js:77:0 <- karma.tests.js:80871:16)
        at webpack:///~/react-dom/lib/ReactCompositeComponent.js:292:0 <- karma.tests.js:25576:19
        at measureLifeCyclePerf (webpack:///~/react-dom/lib/ReactCompositeComponent.js:73:0 <- karma.tests.js:25357:13)
        at ReactCompositeComponentWrapper._constructComponentWithoutOwner (webpack:///~/react-dom/lib/ReactCompositeComponent.js:291:0 <- karma.tests.js:25575:17)
        at ReactCompositeComponentWrapper._constructComponent (webpack:///~/react-dom/lib/ReactCompositeComponent.js:282:0 <- karma.tests.js:25566:20)
        at ReactCompositeComponentWrapper.mountComponent (webpack:///~/react-dom/lib/ReactCompositeComponent.js:185:0 <- karma.tests.js:25469:22)
        at Object.mountComponent (webpack:///~/react-dom/lib/ReactReconciler.js:43:0 <- karma.tests.js:18057:36)
        at ReactDOMComponent.mountChildren (webpack:///~/react-dom/lib/ReactMultiChild.js:234:0 <- karma.tests.js:24689:45)
        at ReactDOMComponent._createInitialChildren (webpack:///~/react-dom/lib/ReactDOMComponent.js:701:0 <- karma.tests.js:21782:33)
        at ReactDOMComponent.mountComponent (webpack:///~/react-dom/lib/ReactDOMComponent.js:520:0 <- karma.tests.js:21601:13)

这里我们需要像下面这样应用reduxForm：

const AnyForm = () => 
     return (
       <form onSubmit=handleSubmit>
           <div>
             <label htmlFor="firstName">First Name</label>
             <Field name="firstName" component="input" type="text" />
           </div>
           <div>
             <label htmlFor="lastName">Last Name</label>
             <Field name="lastName" component="input" type="text" />
           </div> 
         <button type="submit">Submit</button>
       </form>
      )
 

AnyForm = reduxForm(
  form: 'formname'
)(AnyForm)

【讨论】：

请编辑您的问题，以便提问者更容易回答