将 redux-promise-middleware 与 Web 组件测试器一起使用
Using redux-promise-middleware with web component tester
我有一个名为 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>
我在 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>
在 Chrome 和 firefox 中运行得很好,但在 Web 组件测试器中:
redux-store.js:22 Uncaught ReferenceError: ReduxPromiseMiddleware is not defined
at redux-store.js:22
指的是
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};
我通过将其添加到 redux-store.js
的顶部实现了部分解决方法
const scripts = Polymer.ResolveUrl.resolveUrl('./redux-scripts.html');
Polymer.importHref(scripts, null, null, false);
但它并不是非常令人满意,因为它在 运行ning 测试时会导致很多错误,而不是所有测试套件 运行。
另一种解决方案是将 redux-scripts.html
导入添加到所有测试文件,但是,通过更改 redux-promise-middleware 库可以获得更好的解决方案。在 4.4.2 版本中,index.js 中的 import 语句现在指向具有文件扩展名的相对路径 ./isPromise.js
。有了它,我可以在 redux-store.js
中 import promiseMiddleware from '../../node_modules/redux-promise-middleware/dist/es/index.js'
,我们就成功了。
我有一个名为 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>
我在 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>
在 Chrome 和 firefox 中运行得很好,但在 Web 组件测试器中:
redux-store.js:22 Uncaught ReferenceError: ReduxPromiseMiddleware is not defined
at redux-store.js:22
指的是
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};
我通过将其添加到 redux-store.js
的顶部实现了部分解决方法const scripts = Polymer.ResolveUrl.resolveUrl('./redux-scripts.html');
Polymer.importHref(scripts, null, null, false);
但它并不是非常令人满意,因为它在 运行ning 测试时会导致很多错误,而不是所有测试套件 运行。
另一种解决方案是将 redux-scripts.html
导入添加到所有测试文件,但是,通过更改 redux-promise-middleware 库可以获得更好的解决方案。在 4.4.2 版本中,index.js 中的 import 语句现在指向具有文件扩展名的相对路径 ./isPromise.js
。有了它,我可以在 redux-store.js
中 import promiseMiddleware from '../../node_modules/redux-promise-middleware/dist/es/index.js'
,我们就成功了。