Search code examples
javascriptpolymerweb-component-tester

Using redux-promise-middleware with web component tester


I have an import called redux-scripts

<link rel="import" href="../config.html">
<script src="../../node_modules/redux/dist/redux.min.js"></script>
<script src="../../bower_components/amazon-cognito-identity-js/dist/aws-cognito-sdk.min.js"></script>
<script src="../../bower_components/amazon-cognito-identity-js/dist/amazon-cognito-identity.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux-promise-middleware/4.4.1/redux-promise-middleware.min.js"></script>
<script src="./redux-promises.js"></script>

Which I import at the top of redux-mixin.html

<link rel="import" href="../../bower_components/polymer-redux/polymer-redux.html">
<script src="../../bower_components/aws-sdk/dist/aws-sdk.min.js"></script>
<link rel="import" href="redux-scripts.html">

<script type="module" src="./index.js"></script>
<script nomodule src="./bundle.js"></script>

Runs like a charm in Chrome and firefox, but when it comes to web component tester:

redux-store.js:22 Uncaught ReferenceError: ReduxPromiseMiddleware is not defined
at redux-store.js:22

Which is referring to

import programs from './programs/programsReducer.js';
import videos from './videos/videosReducer.js';
import video from './video/videoReducer.js';

const rootReducer = Redux.combineReducers({
  programs,
  videos,
  video,
});

// Setup a Redux store
const initialState = {
  viewSpecificToolbar: 'videos',
};

const store = Redux.createStore(
  rootReducer,
  initialState,

  // The best part 8)
  Redux.compose(
    Redux.applyMiddleware(ReduxPromiseMiddleware.default()),
    window.devToolsExtension ? window.devToolsExtension() : (v) => v
  )
);

export {store};

I've implemented a partial workaround by adding this to the top of redux-store.js

const scripts = Polymer.ResolveUrl.resolveUrl('./redux-scripts.html');
Polymer.importHref(scripts, null, null, false);

But it's not super satisfying, as it causes many errors when running tests, and not all of the test suites run.


Solution

  • Another solution was to add the redux-scripts.html import to all test files, however, a better solution was attained by altering the redux-promise-middleware library. In version 4.4.2, the import statement in index.js now points to the relative path ./isPromise.js with file extension. With that in place, I can import promiseMiddleware from '../../node_modules/redux-promise-middleware/dist/es/index.js' in redux-store.js and we're golden.