[React Testing] The Redux Store - Multiple Actions
2016-01-11 17:06
579 查看
When using Redux, we can test that our application state changes are working by testing that dispatching actions to the store creates our expected output. In this lesson we will run a few realistic actions back to back (as if the user is using the app) and then test that the state tree looks as we expect it to. These types of tests that ensure all of your redux logic is working as expected give you a lot of value for not too much effort (they test your entire app's state in one big swoop). You may also find it useful to add more granular/individual tests for your reducers and/or actions, which we will cover in other lessons in this course.
import expect from 'expect'; import {store} from './store'; describe('store', () => { it('should initialize', () => { const actual = store.getState(); const expected = { quotes: [], theme: { color: '#5DC4C6' } }; expect(actual).toEqual(expected); }); it('should work with a series of actions', () => { const actions = [ { type: 'ADD_QUOTE_BY_ID', payload: { text: 'The best way to cheer yourself up is to try to cheer somebody else up.', author: 'Mark Twain', id: 1, likeCount: 24 } }, { type: 'ADD_QUOTE_BY_ID', payload: { text: 'Whatever you are, be a good one.', author: 'Abraham Lincoln', id: 2, likeCount: 0 } }, { type: 'REMOVE_QUOTE_BY_ID', payload: {id: 1} }, { type: 'LIKE_QUOTE_BY_ID', payload: {id: 2} }, { type: 'LIKE_QUOTE_BY_ID', payload: {id: 2} }, { type: 'UNLIKE_QUOTE_BY_ID', payload: {id: 2} }, { type: 'UPDATE_THEME_COLOR', payload: {color: '#777777'} } ]; actions.forEach(action => store.dispatch(action)); const actual = store.getState(); const expected = { quotes: [ { text: 'Whatever you are, be a good one.', author: 'Abraham Lincoln', id: 2, likeCount: 1 } ], theme: { color: '#777777' } }; expect(actual).toEqual(expected); }); });
相关文章推荐
- ReactiveCocoa v2.5 源码解析 之 架构总览
- muduo源码分析:reactor模型封装
- React Native Flex布局
- React 复用组件 含表单radio/checkbox注意的问题
- React with TypeScript 系列(二) --基础篇
- react native组件学习(三)
- React Native 重新建项目遇到的一些问题
- React 相关文档
- react-native组件学习(二)
- react-native 学习指南
- React Native实战(二):Android的打包
- React Native for Android 实战(一):配置和起步
- ReactNavtive框架教程(2)
- 10个最佳的ReactJS实例教程[译文]
- Backbone模型整合React(React + Backbone Model)
- 最快让你上手ReactiveCocoa之进阶篇
- React Native探索(六)不止是UI:React的使用场景探索
- React Native探索(五):使用Flux搭建React应用程序架构
- React Native探索(四):虚拟DOM Diff算法解析
- React Native探索(三):与 react-web 的融合