[Redux-Observable && Unit Testing] Use tests to verify updates to the Redux store (rxjs scheduler)
In certain situations, you care more about the final state of the redux store than you do about the particular stream of events coming out of an epic. In this lesson we explore a technique for dispatching actions direction into the store, having the epic execute as they would normally in production, and then assert on the updated store’s state.
To test a reducer, what we need to do is actually dispatch as action with its payload.
store.dispatch(action);
But before that, we need to get our 'store' configuration in the test.
configureStore.js:
import {createStore, applyMiddleware, compose} from 'redux';
import reducer from './reducers';
import { ajax } from 'rxjs/observable/dom/ajax'; import {createEpicMiddleware} from 'redux-observable';
import {rootEpic} from "./epics/index"; export function configureStore(deps = {}) {
const epicMiddleware = createEpicMiddleware(rootEpic, {
dependencies: {
ajax,
...deps
}
}); const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose; return createStore(
reducer,
composeEnhancers(
applyMiddleware(epicMiddleware)
)
);
}
index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import {Provider} from 'react-redux';
import {configureStore} from "./configureStore"; const store = configureStore(); ReactDOM.render(
<Provider store={store}>
<App />
</Provider>
, document.getElementById('root'));
The configureStore.js exports function which create a store, we can import normally in the test file.
Now for example, we want to dispatch this action:
export function searchBeers(query) {
return {
type: SEARCHED_BEERS,
payload: query
}
}
Epic:
import {Observable} from 'rxjs';
import {combineEpics} from 'redux-observable';
import {CANCEL_SEARCH, receiveBeers, searchBeersError, searchBeersLoading, SEARCHED_BEERS} from "../actions/index"; const beers = `https://api.punkapi.com/v2/beers`;
const search = (term) => `${beers}?beer_name=${encodeURIComponent(term)}`; export function searchBeersEpic(action$, store, deps) {
return action$.ofType(SEARCHED_BEERS)
.debounceTime(500)
.filter(action => action.payload !== '')
.switchMap(({payload}) => { // loading state in UI
const loading = Observable.of(searchBeersLoading(true)); // external API call
const request = deps.ajax.getJSON(search(payload))
.takeUntil(action$.ofType(CANCEL_SEARCH))
.map(receiveBeers)
.catch(err => {
return Observable.of(searchBeersError(err));
}); return Observable.concat(
loading,
request,
);
})
} export const rootEpic = combineEpics(searchBeersEpic);
'decountTime' make the Epic async!
To verifiy the result is correct, we can do
const store = configureStore(deps); const action = searchBeers('name'); store.dispatch(action); expect(store.getState().beers.length).toBe();
BUT, actually this test code won't work, because the 'decountTime' in the epic, makes it as async opreation. Reducer expects everything happens sync...
One way can test it by using 'scheduler' from rxjs.
import {Observable} from 'rxjs';
import {VirtualTimeScheduler} from 'rxjs/scheduler/VirtualTimeScheduler';
import {searchBeers} from "../actions/index";
import {configureStore} from "../configureStore"; it('should perform a search (redux)', function () { const scheduler = new VirtualTimeScheduler();
const deps = {
scheduler,
ajax: {
getJSON: () => Observable.of([{name: 'shane'}])
}
}; const store = configureStore(deps); const action = searchBeers('shane'); store.dispatch(action); scheduler.flush(); expect(store.getState().beers.length).toBe();
});
And we need to modifiy the epic:
.debounceTime(, deps.scheduler)
Take away, we can test async oprations by using 'scheduler' from rxjs.
-------------------FUll Code------------
[Redux-Observable && Unit Testing] Use tests to verify updates to the Redux store (rxjs scheduler)的更多相关文章
- Unit Testing with NSubstitute
These are the contents of my training session about unit testing, and also have some introductions a ...
- [Java Basics3] XML, Unit testing
What's the difference between DOM and SAX? DOM creates tree-like representation of the XML document ...
- Unit Testing PowerShell Code with Pester
Summary: Guest blogger, Dave Wyatt, discusses using Pester to analyze small pieces of Windows PowerS ...
- C# Note36: .NET unit testing framework
It’s usually good practice to have automated unit tests while developing your code. Doing so helps y ...
- Unit Testing of Spring MVC Controllers: “Normal” Controllers
Original link: http://www.petrikainulainen.net/programming/spring-framework/unit-testing-of-spring-m ...
- Unit Testing, Integration Testing and Functional Testing
转载自:https://codeutopia.net/blog/2015/04/11/what-are-unit-testing-integration-testing-and-functional- ...
- Javascript单元测试Unit Testing之QUnit
body{ font: 16px/1.5em 微软雅黑,arial,verdana,helvetica,sans-serif; } QUnit是一个基于JQuery的单元测试Uni ...
- [Unit Testing] AngularJS Unit Testing - Karma
Install Karam: npm install -g karma npm install -g karma-cli Init Karam: karma init First test: 1. A ...
- C/C++ unit testing tools (39 found)---reference
http://www.opensourcetesting.org/unit_c.php API Sanity AutoTest Description: An automatic generator ...
随机推荐
- bzoj1615 麻烦的干草打包机 BFS
Description Farmer John新买的干草打包机的内部结构大概算世界上最混乱的了,它不象普通的机器一样有明确的内部传动装置,而是,N (2 <= N <= 1050)个齿轮互 ...
- 【深度学习大讲堂】首期第一讲:人工智能的ABCDE 第二部分:简谈当前AI技术与发展趋势
(完)
- 137 - ZOJ Monthly, November 2014 - J Poker Face
Poker Face Time Limit: 2 Seconds Memory Limit: 65536 KB As is known to all, coders are lack of ...
- 怎样安装Windows7操作系统
1. 打开电脑,插入Windows7安装光盘. 2. 又一次启动电脑: 3. 依据提示按下对应的键.进入选择启动项菜单选择光驱引导.在"Boot Menu"界面按键盘上下键选 ...
- POJ 1887 Testingthe CATCHER (LIS:最长下降子序列)
POJ 1887Testingthe CATCHER (LIS:最长下降子序列) http://poj.org/problem?id=3903 题意: 给你一个长度为n (n<=200000) ...
- BZOJ2895: 球队预算
[传送门:BZOJ2895] 简要题意: 在一个篮球联赛里,有n支球队,球队的支出是和他们的胜负场次有关系的,具体来说,第i支球队的赛季总支出是Ci*x^2+Di*y^2,Di<=Ci.(赢得多 ...
- Android 5.0(Lollipop)中的SurfaceTexture,TextureView, SurfaceView和GLSurfaceView
SurfaceView, GLSurfaceView, SurfaceTexture以及TextureView是Android当中名字比较绕,关系又比较密切的几个类.本文基于Android 5.0(L ...
- 从 dig(nslookup) bind —— windows 下的域名解析服务器信息的查看
dig(domain information groper,之所以选择这三个词,在于这三个词的首字母构成的词 dig 也有探索挖掘的含义)本身是 Linux 下的查询 DNS 信息的工具,功能类似 n ...
- UVALive - 6268 Cycling 贪心
UVALive - 6268 Cycling 题意:从一端走到另一端,有T个红绿灯,告诉你红绿灯的持续时间,求最短的到达终点的时间.x 思路:
- Ionic2集成ngx-datatable,ng2-tree第三方控件.md
1. 基本环境配置 1.1. 命令安装相应的依赖 1.2. 在Module定义中引入对应Module 1.3. 引入对应的CSS 2. 简单使用示例验证是否集成成功 2.1. ngx-datatabl ...