title: How To Mock redux-promise-listener Middleware And final-form
body: <p>I setup <code>react-redux-promise-listener</code> <a href="https://github.com/erikras/react-redux-promise-listener" rel="nofollow noreferrer">(repo)</a> for <code>react-final-form</code> via <a href="https://medium.com/@erikras/getting-a-promise-from-redux-actions-d92787894368" rel="nofollow noreferrer">author instructions</a>. Now, I'm having trouble mocking it for testing. </p>
  
  <p>I'm getting error: <code>The redux-promise-listener middleware is not installed</code></p>
  
  <p>I've tried applying middleware within the test provider: </p>
  
  <pre><code>// app/frontend/__mocks__/TestReduxProvider.js
  import React from 'react';
  import { createStore, applyMiddleware } from 'redux';
  import { Provider as ReduxProvider } from 'react-redux';
  import { compose, setDisplayName, defaultProps } from 'recompose';
  import createReduxPromiseListener from 'redux-promise-listener';
  
  import rootReducer from '../store/rootReducer';
  
  const displayName = 'TestReduxProvider';
  
  const enhance = compose(
    setDisplayName(displayName),
    defaultProps({ state: {} }),
  );
  
  const reduxPromiseListener = createReduxPromiseListener();
  
  function TestReduxProvider(props) {
    const { state, children } = props;
    const store = createStore(
      rootReducer,
      state,
      applyMiddleware(reduxPromiseListener.middleware),
    );
  
    return &lt;ReduxProvider store={store}&gt;{children}&lt;/ReduxProvider&gt;;
  }
  
  export const promiseListener = reduxPromiseListener;
  export default enhance(TestReduxProvider);
  
  </code></pre>
  
  <pre><code>// sample test 
  
  import React from 'react';
  import TestReduxProvider from '~/__mocks__/TestReduxProvider';
  
  import { render } from 'enzyme';
  import Form from '../Form';
  
  it('should not break if no params', () =&gt; {
    const wrapper = render(
      &lt;TestReduxProvider&gt;
        &lt;Form /&gt;
      &lt;/TestReduxProvider&gt;
    );
    expect(wrapper).toMatchSnapshot();
  });
  </code></pre>
  
  <pre><code>// form component relevant
  
  import { connect } from 'react-redux';
  import { Form as FormHandler } from 'react-final-form';
  
  import MakeAsyncFunction from 'react-redux-promise-listener';
  import { promiseListener } from '~/store/createStore';
  import {
    STATUS_SUCCESS,
    STATUS_FAILURE,
  } from '~/store/modules/async/constants';
  
  
  const Form = props =&gt; {
    const targetFormErrors = formErrors[targetAction] || '';
  
    return (
      &lt;StyledForm &gt;
        &lt;MakeAsyncFunction
          listener={promiseListener}
          start={targetAction}
          resolve={`${targetAction}/${STATUS_SUCCESS}`}
          reject={`${targetAction}/${STATUS_FAILURE}`}
          setPayload={setPayloadHandler}
        &gt;
          {asyncFunc =&gt; (
            &lt;FormHandler
              onSubmit={asyncFunc}
              validate={isValid}
              initialValues={formattedInitialValues}
              render={({ handleSubmit, pristine, errors, form }) =&gt; {
                if (navigationState !== 'form') {
                  form.reset();
                }
  
                return (
                  &lt;form
                    onSubmit={event =&gt; {
                      setSubmitAttempted(true);
                      handleSubmit(event)
                        .then(() =&gt; submitSuccessHandler(form))
                        .catch(() =&gt; {
                        });
                    }}
                  &gt;
                    {inputsArray.map(formObject =&gt; {
                      return (
                        &lt;div key={formObject.property}&gt;
                          &lt;label&gt;
                            {formObject.label}
                            {formObject.isRequired !== false &amp;&amp; !isDisabled &amp;&amp; (
                              &lt;span className="required"&gt; *&lt;/span&gt;
                            )}
                            &lt;InputContainer&gt;
                              &lt;Input
                                formObject={formObject}
                                isDisabled={isDisabled}
                              /&gt;
                            &lt;/InputContainer&gt;
                          &lt;/label&gt;
                        &lt;/div&gt;
                      );
                    })}
                  &lt;/form&gt;
                );
              }}
            /&gt;
          )}
        &lt;/MakeAsyncFunction&gt;
      &lt;/StyledForm&gt;
    );
  };
  
  export default enhance(Form);
  
  
  
  </code></pre>
  
  <p>I was expecting the snapshot to render. However, I got an error instead:</p>
  
  <pre><code>
  The redux-promise-listener middleware is not installed
  
        103 |     },
        104 |   ];
      &gt; 105 |   const wrapper = render(
            |                   ^
        106 |     &lt;TestReduxProvider&gt;
        107 |       &lt;Form inputsArray={INPUTS_ARRAY} /&gt;
        108 |     &lt;/TestReduxProvider&gt;
  
        at Object.createAsyncFunction (node_modules/redux-promise-listener/dist/redux-promise-listener.cjs.js:60:13)
        at new MakeAsyncFunction (node_modules/react-redux-promise-listener/dist/react-redux-promise-listener.cjs.js:82:31)
        at processChild (node_modules/react-dom/cjs/react-dom-server.node.development.js:2846:14)
        at resolve (node_modules/react-dom/cjs/react-dom-server.node.development.js:2812:5)
        at ReactDOMServerRenderer.render (node_modules/react-dom/cjs/react-dom-server.node.development.js:3202:22)
        at ReactDOMServerRenderer.read (node_modules/react-dom/cjs/react-dom-server.node.development.js:3161:29)
        at Object.renderToStaticMarkup (node_modules/react-dom/cjs/react-dom-server.node.development.js:3661:27)
        at Object.renderToStaticMarkup [as render] (node_modules/enzyme-adapter-react-16/src/ReactSixteenAdapter.js:742:31)
        at render (node_modules/enzyme/src/render.js:21:25)
        at Object.&lt;anonymous&gt; (app/frontend/components/views/dashboard/views/accounts/components/__tests__/Form.test.js:105:19)
  </code></pre>