[React Testing] The Redux Store - Multiple Actions
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);
});
});
[React Testing] The Redux Store - Multiple Actions的更多相关文章
- [React + Functional Programming ADT] Create Redux Middleware to Dispatch Multiple Actions
We only have a few dispatching functions that need to be known by our React Application. Each one ac ...
- [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 ...
- 在React中使用Redux
这是Webpack+React系列配置过程记录的第六篇.其他内容请参考: 第一篇:使用webpack.babel.react.antdesign配置单页面应用开发环境 第二篇:使用react-rout ...
- React 环境增加Redux ,React-Redux
引入 Redux 的目的, 状态管理! React-Redux 就是完成一些粘合剂的作用. 简而化之的理解就是将数据放在store 中维护, 操作逻辑放在reducer中去写. 更功利的表达就是: ...
- 在react中使用redux并实现计数器案例
React + Redux 在recat中不使用redux 时遇到的问题 在react中组件通信的数据是单向的,顶层组件可以通过props属性向下层组件传递数据,而下层组件不能向上层组件传递数据,要实 ...
- React,关于redux的一点小见解
最近项目做多页面应用使用到了,react + webpack + redux + antd去构建多页面的应用,本地开发用express去模拟服务端程序(个人觉得可以换成dva).所以在这里吐槽一下我自 ...
- react系列(五)在React中使用Redux
上一篇展示了Redux的基本使用,可以看到Redux非常简单易用,不限于React,也可以在Angular.Vue等框架中使用,只要需要Redux的设计思想的地方,就可以使用它. 这篇主要讲解在Rea ...
- [Functional Programming ADT] Create a Redux Store for Use with a State ADT Based Reducer
With a well defined demarcation point between Redux and our State ADT based model, hooking up to a R ...
- [Angular & Unit Testing] Testing Component with Store
When using Ngrx, we need to know how to test the component which has Router injected. Component: imp ...
随机推荐
- form表单提交
1.form表单提交.html页面失败 <%--客户端form--%> <form id="form2" action="LoginOne.html&q ...
- HTML5 学习
1.<header> 标签定义文档的页眉(介绍信息) 标签是 HTML 5 中的新标签 <header> <h1>Welcome to my homepage< ...
- php 通过ip获取地理位置
<?php header('Content-Type:text/html;Charset=utf-8'); function GetIp(){ $realip = ''; $unknown = ...
- javascript call()与apply()
1.方法定义 call方法: 语法:call([thisObj[,arg1[, arg2[, [,.argN]]]]]) 定义:调用一个对象的一个方法,以另一个对象替换当前对象. 说明: call ...
- 使用padding-top实现自适应背景图片
在父级容器中设定最大的宽度,由于背景图片会出现塌陷的情况,有宽度无高度, 则,在图片容器中添加以下属性 padding-top:%(计算方式:图片的高度/图片的宽度*100%) background- ...
- MVC模式下xml文件的解析
第一次写blog,组织不当和出错的地方还请大家多担当哈. java操作xml文件的方式中用的较多的有四种,DOM.SAX.JDOM.DOM4J.除第一种外其余的三种我都有试过,这后三种方案中我选择用S ...
- NGINX关于配置PATHINFO
最近在群里发现有很多小白不会配置pathinfo现贴出来配置代码照着配置就可以了 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 2 ...
- Java中解析XML的四种方法
XML现在已经成为一种通用的数据交换格式,它的平台无关性,语言无关性,系统无关性,给数据集成与交互带来了极大的方便.对于XML本身的语法知识与技术细节,需要阅读相关的技术文献,这里面包括的内容有DOM ...
- Linux启动网卡时出现RTNETLINK answers: File exists错误解决方法
这里说一下,如果复制了虚拟机,设置新的MAC地址为什么? 在虚拟机的网络设置中--->高级.然后找到如下窗口,生成新的MAC地址即可. ----------------------------- ...
- java入门时的一些基本概念的理解(j2ee,j2se,j2me,jdk,sdk,jre,jvm,跨平台)
首先声明,这篇文章是从网上粘贴过来的.原文地址是:http://www.cnblogs.com/wangaohui/archive/2012/11/28/2791999.html.感觉写的很好,所以粘 ...