Question

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


      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表单？以前从未见过此错误，并且该错误对我没有用...

任何想法我该怎么做才能消除错误？

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

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

1 个答案: